超简单直观理解懒加载（Lazyload） |
您所在的位置：网站首页 › html中图片逐渐出现 › 超简单直观理解懒加载（Lazyload） |
超简单直观理解懒加载（Lazyload）
|
懒加载
什么是懒加载懒加载的作用简单的实现未来
什么是懒加载
懒加载，即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候，如果在进入页面的时候一次性把所有图片加载完，需要很长的时间。为了提升用户体验，我们使用懒加载，当图片出现在浏览器可视区域时，才加载图片。例如各种电商页面。 懒加载的作用 加快页面打开速度，提升用户体验减少服务器压力和浏览器的负担 简单的实现1、我们先来看看一次性加载20张图片，要用多少时间。 Lazyload img { display: block; height: 200px; }
2、我们再来看加载20个一样的图片，要用多少时间。 // 把上面代码的img替换成：
3、经过上面的实验，我们可以理解一下懒加载的原理。就是只加载页面上你看得到的图片。你还没滚动到的图片不加载，都用loading图片这一张图片代替。那么实际上我们进入页面的时候，只加载了一张loading图片和浏览器可视区域的n张图片。 function lazyload(){ var imagesList = document.getElementsByTagName('img'); // 获取所有图片列表 var length = imagesList.length; // 一共有多少张图片 var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数 return function(){ var clientHeight = document.documentElement.clientHeight; // 浏览器可视区域的高度 var scrollTop = document.documentElement.scrollTop; // 页面被遮挡的高度 for(var i = n;i // offsetTop获取图片顶部相对于页面顶部的距离，当它小于浏览器可视区域的高度和页面被遮挡的高度之和时，加载图片 if(imagesList[i].getAttribute('src')==='./loading.png'){ //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src imagesList[i].src = imagesList[i].getAttribute('data-src'); } n = n + 1; }else{ break; } } } } var a = lazyload(); a(); window.addEventListener('scroll', a, false); // 监听页面滚动事件，执行lazyload函数。我们通过计算浏览器的高度clientHeight和页面的被遮挡的高度scrollTop的和，再计算图片的顶部与该页面顶部的距离offsetTop，最后比较它们的大小。使还未出现在页面中的图片不加载，来实现懒加载。看看效果，我们的可视区域只有3张图片，一共加载的图片资源为1张loading图片和3张可视区域的图片，共用时90ms。相对于不使用懒加载，一次性加载20张图片的220ms，节省了用户的130ms的等待时间。在图片量多的网站中，效果更为明显。 https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg Chromium 官方支持的 image 懒加载将在 Chrome 75 发布，也就是说，将来只需要使用 |
我们把图片资源全部写在img的src里。这时候则一次性加载了全部。所用时间220ms。
我们可以看到，虽然这张图片展示了20次，但是由于都是同一个资源，所有浏览器只请求了一次。用时85ms。
参考资料： 延迟加载(Lazyload)三种实现方式 【本文地址】
今日新闻 |
推荐新闻 |