이미지 지연 로딩 및 사전 로딩에 대한 자세한 설명
- 韦小宝원래의
- 2018-03-14 15:43:333741검색
이 문서에서는 images지연 로딩 및 이미지 사전 로드에 대해 설명합니다. 또는 이미지 지연 로딩 및 사전 로드에 대해 자세히 알아보려면 이 문서를 살펴보겠습니다. 헛소리는 그만하고 본론으로 들어가자!
1. 지연 로딩
새로운 것을 이해하면 무엇과 왜부터 시작하세요. 즉, 이미지의 지연 로딩 기술을 이해하려면 먼저 지연 로딩이 무엇인지 이해해야 합니까? 지연 로딩을 사용해야 하는 이유는 무엇입니까?
1.1 지연 로딩이란 무엇인가요?
지연 로딩을 지연 로딩이라고도 합니다. 페이지에 접근할 때 img 요소나 다른 요소의 배경 이미지를 기본 이미지(배치 이미지)로 바꿔야 합니다. 이렇게 하면 브라우저는 페이지를 렌더링할 때 한 번만 요청하면 됩니다. 브라우저의 가시 영역
에 이미지가 나타나면 이미지의 실제 경로가 설정되어 이미지가 표시됩니다.1.2 이미지 지연 로딩을 사용하는 이유는 무엇입니까?
각종 쇼핑몰 사이트, 이미지 자료 사이트 등 페이지 내 사진 개수가 일정 개수에 도달하고, 사진 크기가 상대적으로 큰 경우 페이지가 로드되자마자 모든 이미지를 로드하게 되면 당연히 웹사이트의 로딩 속도에 영향을 미치고 서버의 로드도 늘어나 사용자 경험도 당연히 나빠지므로 이때는 지연 로딩을 사용하면 됩니다. .
1.3 지연 로딩의 구체적인 구현 원칙
페이지의 img 요소가 http 요청을 보내는 이유는 src 속성이 설정되어 있기 때문입니다. 그렇지 않으면 브라우저는 이미지 다운로드 요청을 보내지 않습니다. 먼저 자리 표시자 이미지를 사용하여 모든
그림을 페이지에 배치하고 요소 아래에 src 사용자 정의 속성을 설정하여 그림의 실제 경로를 저장합니다. 필요한 경우 실제 경로를 꺼내서 이동하세요
src에 상태가 추가되었습니다.
2. 프리로딩
2.1.
미리 로드란 이미지를 미리 로드하는 것을 의미하며, 사용자가 이미지를 봐야 할 때 로컬 캐시에서 직접 렌더링할 수 있습니다.
2.2 사전 로드를 사용하는 이유는 무엇입니까?
페이지의 사진이 상대적으로 크면 페이지를 로드할 때 해당 영역이 비어 있거나 사진이 느리게 로드됩니다. 사용자 경험을 개선하려면 이러한 사진을 미리 로드해야 합니다. 캐시를 사용하면 사용자가 페이지를 열 때 이러한 이미지가 빠르게 표시되어 더 나은 사용자 경험을 얻을 수 있습니다.
2.3의 구현 방법은 무엇입니까?
방법 1: CSS 및 JavaScript
를 사용하여 사전 로드 구현방법 2:
JavaScript를 사용하여 사전 로드 구현
3. 지연 로딩과 사전 로딩의 차이점과 구체적인 구현 방법두 기술의 동작은 정반대입니다. 하나는 미리 로딩하는 것이고, 다른 하나는 지연 로딩 또는 로딩 없음입니다. 지연 로딩은 서버에 좋으며 어느 정도의 부담을 덜어줄 수 있습니다
. 반면에 미리 로드하면 서버의 로드가 증가합니다.
지연 로딩의 구체적인 구현 방법:
1 첫 번째는 로딩 지연을 위해 setTimeOut 또는 setInterval을 사용하는 순수 지연 로딩입니다. 특정 조건을 충족하거나 특정
이벤트를 트리거하여 비동기 다운로드를 시작합니다.
3. 세 번째 방법은 보이는 영역, 즉 사용자가 볼 수 있는 영역만 로드하는 것입니다. 이는 주로 사용자 앞에서 일정 거리에서 수행되는 스크롤 막대를 모니터링하여 수행됩니다. 특정 사진이 보입니다
사전 로드를 구현하는 방법은 다양합니다. CSS와 JavaScript를 사용하여 사전 로드를 구현합니다. 사전 로드를 구현하려면 JavaScript만 사용합니다.
가장 일반적으로 사용되는 방법은 new Image()입니다. src를 설정하여 사전 로드를 달성한 다음 onload 메서드를 사용하여 사전 로드 완료 이벤트를 콜백합니다. 브라우저가 이미지를 로컬로 다운로드하는 한 동일한 src가 캐시됩니다. 이는 가장 기본적이고 실용적인 사전 로드 방법입니다. Image가 이미지 헤더를 다운로드하면 너비와 높이를 가져오므로 미리 로드하기 전에 이미지 크기를 얻을 수 있습니다. (
방법은 타이머를 사용하여 너비와 높이 변경을 순환하는 것입니다.
이 글은 여기까지입니다. 모든 콘텐츠에 대해 잘 모르신다면 혼자서도 쉽게 양쪽을 마스터하실 수 있습니다!
관련 권장 사항:
jquery의 lazy loading
JS미리 로드
위 내용은 이미지 지연 로딩 및 사전 로딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!