图片惰性加载

最新推荐文章于 2023-05-16 11:20:55 发布

童先森的blog

最新推荐文章于 2023-05-16 11:20:55 发布

阅读量572

点赞数 1

本文链接：https://blog.csdn.net/lannijiang/article/details/82806769

版权

在讲图片的惰性加载前，我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等，还有个好听的英文名字叫做 "lazyload"。需要注意的是，惰性加载并不只是图片的专利，Javascript 中函数也有惰性加载的概念（详见高性能JavaScript 编程实践 "不要重复工作" 一节），而在 Javascript 异步加载中还有个 LazyLoad类库，而图片的惰性加载库（lazyload）与之完全是两个概念，这些一定要弄清楚，以免混淆概念。图片的惰性加载是啥意思？为什么要用它？当我们页面上的东西越来越丰富的时候，我们发现页面的加载速度却越来越慢，而图片的加载量无疑是 HTTP 请求里面的大头。其实很多时候，你把整个页面加载完，用户却不会滑动到最下面，也就是说很多东西其实白白加载了。因为图片的加载是大头，所以我们先拿图片开刀，我们假设，如果试图加载一个 HTML 页面，图片先不加载，当用户将页面往下滑动，图片该出现在可视区域时，再将该图片加载，这样就能将一开始打开页面的 HTTP 请求量降低，这就是图片的惰性加载。

接下来时代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <ul>
   <li class='lazy'><img data-original='images/images0.jpg' src='images/images0.jpg'/></li>
   <li class='lazy'><img data-original='images/images1.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images2.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images3.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images4.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images5.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images6.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images7.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images8.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images9.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images10.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images11.jpg' src=''/></li>
   <li class='lazy'><img data-original='images/images12.jpg' src=''/></li>
   </ul>
</body>
<script>
init();
function init() {
var images = document.images;
// console.log(images);
// 加载首屏图片

for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
// console.log(obj)
// 如果在可视区域并且还没被加载过
if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
// console.log(obj.dataset);
// 先调用 HTML5 方法
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
} else {
break;
}
}
}
window.onscroll = function() {
lazyload();
};

function lazyload() {
var lazy = 500;
var images = document.images;
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
obj.style.cssText = "transition: ''; opacity: 0;"
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute('data-original'));
}
if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
obj.isShow = true;
obj.style.cssText = "transition: 1s; opacity: 1;"
}
}
}
function imageLoaded(obj, src) {
var img = new Image();
img.onload = function() {
obj.src = src;
};
img.src = src;
}
</script>
</html>

童先森的blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片惰性加载

在讲图片的惰性加载前，我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等，还有个好听的英文名字叫做 "lazyload"。需要注意的是，惰性加载并不只是图片的专利，Javascript 中函数也有惰性加载的概念（详见高性能JavaScript 编程实践 "不要重复工作" 一节），而在 Javascript 异步加载中还有个 LazyLoad类库，而图片的惰性加载库（lazyload）与之完全...
复制链接

扫一扫