图片懒加载(初始)
来源:互联网 发布:怎么通过淘宝账号人肉 编辑:程序博客网 时间:2024/06/07 09:40
懒加载的意义(为什么要使用懒加载)
对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。
所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。
原理
将页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。
代码
在写代码前,需要了解各种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft
<head> <meta charset="UTF-8"> <title>Document</title> <style> img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } </style></head><body> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""></body>`**Javascript写法**<script> var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历 lazyload(); //页面载入完毕加载可是区域内的图片 window.onscroll = lazyload; function lazyload() { //监听页面滚动事件 var seeHeight = document.documentElement.clientHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (var i = n; i < num; i++) { if (img[i].getBoundingClientRect().top < seeHeight + scrollTop) { if (img[i].getAttribute("src") == "default.jpg") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } }</script>**JQuery写法**<script> var n = 0, imgNum = $("img").length, img = $('img'); lazyload(); $(window).scroll(lazyload); function lazyload(event) { for (var i = n; i < imgNum; i++) { if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) { if (img.eq(i).attr("src") == "default.jpg") { var src = img.eq(i).attr("data-src"); img.eq(i).attr("src", src); n = i + 1; } } } }</script>
注: getBoundingClientRect().top
getBoundingClientRect()
这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2document.documentElement.clientLeft; // 非IE为0,IE为2functiongGetRect (element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left= document.documentElement.clientLeft; return{ top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left }}
分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。
0 0
- 图片懒加载(初始)
- Aandroid 图片加载库Glide 实战(一),初始,加载进阶到实践
- 图片懒加载(滚动加载)原理
- jq 图片延迟加载(懒加载)
- GridView初始时加载一张图片,点击后加载另外一张大图
- 按需加载图片(图片懒加载)
- 按需加载图片(图片懒加载)
- 图片预加载与图片懒加载
- 图片预加载与图片懒加载
- 图片懒加载(图片延迟加载问题)
- 滚动加载图片(懒加载)实现原理
- js图片懒加载(可视区域加载)
- 滚动加载图片(懒加载)实现原理
- 滚动加载图片(懒加载)实现原理
- (滚动加载图片)懒加载实现原理
- 图片懒加载(移动端)
- 图片懒加载技术
- 图片懒加载
- Java中普通代码块,构造代码块,静态代码块区别及代码示例
- QList简单使用
- 把.c文件转为汇编,并分析堆栈
- 信息安全论学习笔记(一):绪论
- [RealSense]0-写在前面
- 图片懒加载(初始)
- 阻塞机制下的recv小结
- 51nod 1102 面积最大的矩形【单调栈、预处理】
- Spring“黑科技”---实现数据库信息加密
- java--07--工具方法
- 带有H5标签的字符串
- 1024. 科学计数法 (20)
- 20170223-leetcode-091-Number of Segments in a String
- WINDOWS环境设置隐藏用户