懒加载的实现原理及一些实现方法 |
您所在的位置：网站首页 › 图片的懒加载是如何实现的 › 懒加载的实现原理及一些实现方法 |
懒加载的实现原理及一些实现方法
|
图片懒加载
为了避免页面一次性向服务器发送大量请求而造成页面阻塞，我们需要控制请求数量，按照我们需要的量去加载图片。 懒加载的优点提高前端性能，按需加载图片减轻服务器负担，提高页面加载速度。 懒加载的原理图片的加载是依赖于src路径，我们可以设置一个暂存器，把图片路劲放到暂存器中，当我们需要这个图片加载显示时，再把路径赋值给src，这样就能实现按需加载，也就是懒加载。我们通常使用html5中的data-属性作为暂存器，例如src的值默认是正在加载中的GIF，而真正的图片路径是保存在data-中。 懒加载的实现现在很多优秀的插件都能够实现懒加载的功能，但是不管方法如何，实现原理都是一样的。 JQuery（不使用插件）
使用懒加载时，我们的src的值默认是”正在加载中“的GIF，data-lazyload是自定义属性，用于存放图片真实路径。如下面的代码。
我们首先要知道什么时候应该加载图片，什么时候不需要加载？ 对于用户来说，看得到的地方才需要加载，看不到的地方加载了也是白白浪费资源。所以我们知道，在可视区域中，我们才需要加载图片。
如何判断图片是否在可是区域？我们可以利用元素的偏移高度，对比设备宽度加上滚动条高度来判断该元素是否处于可视区域中。
上图中，offsetTop是图片元素的偏移高度，window.height()是设备的高度，scrollTop是滚动条与顶部的距离，因为滚动条在顶部，所以值为0。
当offsetTop大于window.height() + scrollTop时，图片就在可视区域之外。此时我们可以拉动滚动条，让文档向上移动，图片渐渐出现在可视区域之中。
图片元素的offsetTop基本不变，如果设备高度加上滚动条与顶部的距离大于或者等于图片元素的偏移高度，我们就说它是在可视区域当中。所以有如下表达式： img.offset().top true/false
接下来借助jQuery来实现 定义十张图片 ./loading.gif——加载中图片 data-lazyload——自定义属性，存放图片路径
JavaScript 1 // 监听滚动条事件 2 $(window).on('scroll', () => { 3 // 设置延时函数，防止加载过快，减轻服务器负担；为了效果明显，设置两秒延时 4 setTimeout(() => { 5 // 执行获取图片函数 6 getImg(); 7 },2000); 8 }) 9 10 // 获取图片函数 11 function getImg() { 12 // 遍历图片元素 13 $('.img img').each((index, item) => { 14 // 判断每一个图片元素是否在可视区域 15 if($(item).offset().top { 7 if (clock) { 8 // 如果拉动滚动条时，延时函数还未执行完，则清除 9 clearTimeout(clock); 10 } 11 clock = setTimeout(() => { 12 getImg(); 13 }, 2000) 14 }) 15 16 function getImg() { 17 // 返回没有data-isLoaded的img标签 18 // [1,2,3].not(1) => 返回不含有1的数组 [2,3] 19 $('.img img').not('[data-isLoading]').each((index,item) => { 20 if(isShow(item)) loading(item); 21 }) 22 } 23 24 function isShow(img) { 25 return $(img).offset().top |
【本文地址】
今日新闻 |
推荐新闻 |