图片的懒加载
来源:互联网 发布:全景故宫软件 编辑:程序博客网 时间:2024/04/30 07:43
懒加载的意义(为什么要使用懒加载)
对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。
所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。
原理
将页面中的img标签src指向一张小图片或者src为空,然后定义data-src属性指向真实的图片。src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
注:图片要指定宽高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。
代码
在写代码前,需要了解各种高度。
<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 = newDate(); returnfunction() { var context =this, args = arguments, curTime = newDate(); 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
- 图片的懒加载
- 图片的懒加载
- 图片的懒加载
- 图片的懒加载
- listView的懒加载图片
- 图片的懒加载,预加载,色彩预制加载
- 懒加载——网页图片的加载技术
- 懒加载——网页图片的加载技术
- 懒加载——网页图片的加载技术
- 网页图片的懒加载和预加载
- javascript图片懒加载与预加载的分析
- 懒加载——网页图片的加载技术
- 加载的图片太多?快试试懒加载!
- JS与JQ图片的预加载与懒加载
- 简单的懒加载图片数据
- python实现懒加载图片的下载
- MUI 图片懒加载的源码分析
- 一个简单的图片懒加载
- 操作系统IPC
- 简易 文章发布系统——后台管理系统
- Feescale K60开发笔记8: MQX中看门狗的使用
- android handler传递消息过程
- 费曼学习法-超级学习法
- 图片的懒加载
- [Android 分享] 使用xposed来hook使用360加固的应用
- java的request中文转码
- PHP实现页面静态化——全部纯静态化
- PHP实现页面静态化——局部动态化
- React Native 之 Redux使用教程
- sklearn logistic使用
- C++(18):STL之vector初步
- linux ubuntu 12.04 添加root账号登录