实现图片懒加载(Lazyload)
来源:互联网 发布:smarty3 php handling 编辑:程序博客网 时间:2024/04/29 10: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=""> <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].offsetTop < 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>
使用节流函数进行性能优化
如果直接将函数绑定在scroll
事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器的性能。
我想实现限制触发频率,来优化性能。
节流函数:只允许一个函数在N秒内执行一次。下面是一个简单的节流函数:
// 简单的节流函数//fun 要执行的函数//delay 延迟//time 在time时间内必须执行一次function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果达到了规定的触发时间间隔,触发 handler if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; // 没达到触发间隔,重新设定定时器 } else { timeout = setTimeout(fun, delay); } };};// 实际想绑定在 scroll 事件上的 handlerfunction 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; } } } }// 采用了节流函数window.addEventListener('scroll',throttle(lazyload,500,1000));
0 0
- 实现图片懒加载(Lazyload)
- 实现图片懒加载(Lazyload)
- JQuery.LazyLoad 实现图片懒加载
- jquery.lazyload.js实现图片懒加载
- jquery.lazyload.js 实现图片懒加载
- jquery.lazyload.js实现图片懒加载
- lazyLoad 懒加载 图片例子
- vue-lazyload图片懒加载
- jquery的lazyload.js实现图片的懒加载
- jquery的lazyload.js实现图片的懒加载
- 前端如何实现图片懒加载(lazyload) 提高用户体验
- 前端如何实现图片懒加载(lazyload) 提高用户体验
- 前端如何实现图片懒加载(lazyload) 提高用户体验
- 前端实现图片懒加载(lazyload)的两种方式
- jquery.lazyload 插件实现图片延迟加载
- JQuery LazyLoad实现图片延迟加载-探究
- JQuery LazyLoad实现图片延迟加载-探究
- lazyload.js实现图片异步延迟加载
- js 设计模式 oop 面向对象编程
- SVN和android studio的关联
- 推荐系统:技术、评估及高效算法 第4章
- Maven的安装攻略
- sudo遇到问题unable to resolve host ubuntu
- 实现图片懒加载(Lazyload)
- 【数据结构】利用后缀表达式求表达式的值
- Android中的Shape使用总结
- 第十五周 项目1--验证算法--(2)直接插入排序
- JavaScript 基础笔记 1数据类型
- 【树莓派开发-Linux】sudo apt-get 相关命令整理
- 递归删除——项目实战篇
- Tomcat 容器与servlet的交互原理
- JavaScript 基础笔记 2函数传参