현재 사진 게으른 로딩을 위해, 우리는 일반적으로 사용하는 타사 라이브러리 또는 게으른로드 라이브러리에 의해 얻을 수 있지만,이 방법 중요한 문제는 순서대로 수행해야한다는 것입니다 :
1, HTML 콘텐츠의 초기 응답로드
2, 지연로드 라이브러리로드
3,로드 사진을
브라우저가 직접 게으른로드를 지원할 수있는 경우는 최고입니다, 아이디어는 불가능 아, 아닙니다! 수동으로 게으른 로딩 기능을 사용하려면 처음부터 크롬 75, 우리는 두 개의 스위치를 전환 할 수 있습니다, 최신 크롬 가능성이 우리가 수동으로 설정할 필요가 없습니다 말을하는 것입니다 게으른 로딩 기능에 기본 설정됩니다. (가 크롬 브라우저에 올 때 참고이 오에만 있음)
원칙의 특성을로드 :
기본 지연로드 기능을 얻을 수있는 프리 플라이트 요청을 사용하여 데이터를 이미지 파일의 2048 바이트 전에를 . 사전에 취득 된 데이터는, 브라우저가 이미지의 크기를 결정하도록 시도 할 것이며, 제 1 또는 제 2 요구가 완료되면, 전체 이미지가로드 (화상 사이즈가 작은 2킬로바이트하는 플라이트 요청만큼 초과하는 경우), 그것은로드 이벤트 리스너를 해제합니다.
우리는 브라우저가 지연로드 기능이 지원되는 경우, img 태그의 로딩에 직접 쓰기 쉽게 게으른로드 기능을 구현 할 수있는 관련 값을 설정할 수 있습니다 지원하는지 여부를 스크립트에 의해 판단 할 수있다, 로딩 세 값은 자동 (기본값 게으른 브라우저 게으른 로딩을 사용할지 여부를 결정하는), 열망 (직접 부하 그림), (게으른 로딩이 켜져).
브라우저가 기본 게으른로드 기능을 지원하는지 여부를 확인하려면 다음 스크립트를 사용 :
<script>
if("loading" in HTMLImageElement.prototype){
alert("支持");
}else{
alert("不支持，你可能需要引入懒加载库来实现懒加载");
}
</script>그렇다면, 우리는 img 태그의 하중에 대한 값을 지정할 수 있습니다 :
<img src="" alt="浏览器自行决定是否启用懒加载" loading="auto">
<img src="" alt="浏览器立即加载该图片" loading="eager">
<img src="" alt="浏览器使用懒加载" loading="lazy">
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）