# lazyload

20개의 포스트
post-thumbnail

LazyLoad vs PreLoad

LazyLoad LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은, 즉 눈에 보여지지 않는 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그때 로딩을 한다. LazyLoad를 사용해야 하는 이유는 당장 불필요한 이미지들가지 웹페이지를 불러올 때, 한번에 가지고 오면 로딩 시간과 성능 면에...

5일 전
·
0개의 댓글

Day-31 FileReader, Promise.all, LazyLoad & PreLoad

기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않

5일 전
·
0개의 댓글
post-thumbnail

코드캠프 FE 31일차 - TIL(FileReader,Promise.all,LazyLoad/PreLoad)

📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를

5일 전
·
0개의 댓글

LazyLoad vs PreLoad

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이다.하지만 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 한다.예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로

5일 전
·
0개의 댓글
post-thumbnail

31) FileReader ?

Algorithm Self Study, Image Upload Process, Promise & Promise.all, LazyLoad vs PreLoad, Algorithm Class, self Study

5일 전
·
0개의 댓글
post-thumbnail

react에서 image Lazyload

사용자의 UX적 측면을 개선하기 위한 방법 중 하나로 lazyload가 있다. 간단하게 말하면 지금 당장 필요하지 않은 부분의 로딩을 지연시키는 것이다. 지금 필요하지 않은 부분을 렌더링 하지 않는 다는 것은 서버로부터 해당부분의 데이터를 전송받을 필요가 없다는 것이고

2022년 6월 12일
·
0개의 댓글
post-thumbnail

웹 최적화를 위한 background-image lazyload

웹 페이지 로딩 타임을 당길 수 있는 의외의 방법이 있어서 사용 중이다.보통 페이지가 로딩될 때 하단부의 배경 이미지들은 뷰포트에 노출되지 않는다.아래 참고 이미지에서 Section 2, 3의 배경 이미지는 처음에 불필요하다.이러한 배경 이미지의 요청을 로딩 후로 미루

2022년 6월 2일
·
0개의 댓글
post-thumbnail

웹 최적화를 위한 image lazyload

페이지를 로딩하는 시점에서 불필요한 이미지 리소스의 요청을 미루는 기술이다. 초기 요청 수를 줄여 로딩 속도를 높이기 위함두 가지 방법을 정리했다.보통 javascript를 이용한 방법이 많이 사용되고 있지만 HTML loading 속성을 이용하면 쉽게 구현이 가능하다

2022년 5월 20일
·
0개의 댓글

[React] LazyLoad vs PreLoad

LazyLoadImage 사용할 준비가 된 여러 효과가가 포함되어 있으며 응용 프로그램에 시각적 캔디를 추가하는데 유용하지만 , 필요하지 않거나 자체 효과를 구현하려는 경우에는 완전히 선택사항입니다.사진을 미리 다운 받아 놓고 기다리다가 버튼을 누르거나 페이지가 변경되

2022년 5월 1일
·
0개의 댓글

Lazyload vs Preload

LazyLoad는 사이트 사이트를 랜더 해 올 때 필요한 만큼(보이는/지정된범위) 만큼의 이미지만 다운받아오는 것을 말한다.웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading이다LazyLoa

2022년 5월 1일
·
0개의 댓글
post-thumbnail

LazyLoad vs PreLoad

웹에서 페이지에 들어갔을 때 페이지에 존재하는 모든 이미지를 불러오면이미지의 양이 많을 수록 혹은 용량이 클 수록 그 속도가 느려지게 된다.그래서 사용자가 현재 보고있는 화면에 해당하는 이미지만 그 때 그 때불러와서 보여주면 속도를 향상시킬 수 있는데 이 기술이 Laz

2022년 4월 30일
·
0개의 댓글

LazyLoad/PreLoad

LazyLoad : 특정 페이지에 접속했을 때 페이지에 있는 모든 사진을 랜더링하지 않고 스크롤을 내리게되면 랜더링해준다. 만약 모든 사진을 랜더링해야할 경우 유저가 이미지가 다 다운받아질때까지 기다려야하는 번거로움을 줄 일 수 있다.PreLoad : 이미지가 큰 경우

2022년 4월 30일
·
0개의 댓글
post-thumbnail

LazyLoad vs PreLoad

LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은(보여지지않는) 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그 때 로딩을 한다.LazyLoad를 사용해야하는 이유는 당장 불필요한 이미지들까지 웹페이지

2022년 4월 26일
·
0개의 댓글
post-thumbnail

31일차) 언제까지 사진 한 장씩 올리는거 기다릴거야! FileReader/readAsDataURL/Promise.all/ 실무 위주 !성능 높여 ! 끌어올려! Code Camp FE 6기

오늘 배울 내용 우리가 기존에 쓰던 이미지 업로드 방식 백엔드의 uploadFile api요청을 통해서 storage에 사진을 저장하고, url을 받아와서 브라우저에 url을 넘겨주었었다.그 다음에 그 url을 첨부해서 createBoard api요청을 해서게시글에 이

2022년 4월 26일
·
2개의 댓글

lazyload

🐇 What is lazyload❓ 실제 이미지가 화면에 보여질 필요가 있을 때, 로딩을 할 수 있는 기술 즉, 웹 페이지 내 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것 Image뿐 아니라 SPA내 JS파일 로드에도 사용할 수 있음 🐇 Why useing? 🥕 Improved Performance 성능향상은 웹 사이트 로딩 시간, ...

2022년 4월 19일
·
0개의 댓글
post-thumbnail

20220225_TIL : 이미지 업로드

기존에 스토리지 저장 방식에서는 게시물을 등록하지 않아도 이미지를 로드할때 스토리지에 저장하고 그 url을 받아와서 등록하는 방식이었다.JS 기능 FileReader()를 사용해서 아직 파일을 업로드(uploadFile)하지는 않은 상태로 임시 주소를 만들어서 이미지를

2022년 2월 26일
·
0개의 댓글

📕 TIL 0225

[upload image] [recursion function]

2022년 2월 25일
·
0개의 댓글
post-thumbnail

Day 32

FileReader자바스크립트에 있는 기능이다. 미리보기를 할 수 있지만 내 컴퓨터에 저장되는 거기 때문에 다른사람은 못본다. 이후 fileReader.readAsDataURL(파일) 을 하면 파일에서 URL을 만들어준다. fileReader.onload로 불러온다.그

2021년 12월 14일
·
0개의 댓글
post-thumbnail

캠프 4주 4일차

이미지 프리뷰( Filereader, promise.all )

2021년 7월 29일
·
0개의 댓글
post-thumbnail

React lazy loading, debounce

React.lazy 는 코드분할을 하게 해줍니다.코드분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다.앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.Ap

2021년 6월 2일
·
0개의 댓글