js图片延迟加载(Lazyload)三种实现方式


Posted in Javascript onMarch 01, 2017

延迟加载也称为惰性加载,即在长网页中延迟加载图像。

用户滚动到它们之前,视口外的图像不会加载。

这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。

在某些情况下,它还可以帮助减少服务器负载。

延迟加载的优点:

提升用户的体验,如果图片数量较大,打开页面的时候要将将页面上所有的图片全部获取加载,很可能会出现卡顿现象,影响用户体验。因此,有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。

方法一

将页面上所有图片的src属性设置为loading.gif,而图片的真实路径则设置在data-src属性中。

当页面滚动的时候计算图片位置和滚动的位置,当图片出现在浏览器视口内时,将图片的src属性设置为data-src的值。

<img src="loading.png" data-src="image.png">
img { display: block; margin-bottom: 50px; }
function lazyload() {
 var images = document.getElementsByTagName('img');
 var n = 0; // 用于存储图片加载到的位置,避免每次都从第一张图片开始遍历 
 return function() {
 var seeHeight = document.documentElement.clientHeight;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 for(var i = n; i < images.length; i++) {
  if (images[i].offsetTop < seeHeight + scrollTop) {
  if (images[i].getAttribute('src') === 'loading.png') {
   images[i].src = images[i].getAttribute('data-src');
  }
  n = n + 1;
  }
 }
 }
}
lazyload(); //初始化首页的页面图片
window.addEventListener('scroll', lazyload(), false);

方法二

上面的方法虽然没什么问题,但是性能较差,因为当页面滚动时,scroll事件会高频触发,这非常影响浏览器性能。
所以,这里要对lazyload函数进行函数节流(throttle)与函数去抖(debounce)处理。

这里html和css代码不变,经过throttle处理的js代码如下:

function throttle (fn, delay, atleast) {
 var timeout = null,
  startTime = new Date();
 return function () {
 var curTime = new Date();
 clearTimeout(timeout);
 if (curTime - startTime >= atleast) {
  fn ();
  startTime = curTime;
 } else {
  timeout = setTimeout (fn, delay);
 }
 }
}

function lazyload() {
 var images = document.getElementsByTagName('img'),
  n = 0;  //存储图片加载到的位置,避免每次都从第一张图片开始遍历 
 return function() {
 var seeHeight = document.documentElement.clientHeight;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 for(var i = n; i < images.length; i++) {
  if(images[i].offsetTop < seeHeight + scrollTop) {
  if(images[i].getAttribute('src') === 'loading.png') {
   images[i].src = images[i].getAttribute('data-src');
  }
  n = n + 1;
  }
 }
 }
}
lazyload(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(lazyload(), 500, 1000), false);

方法三

目前有一个新的 IntersectionObserver API,可以自动"观察"元素是否可见。

用这种方法实现代码非常简洁,但是许多浏览器不支持。

js图片延迟加载(Lazyload)三种实现方式

  • IntersectionObserver 传入一个回调函数,当其观察到元素集合出现时候,则会执行该函数。
  • io.observe 即要观察的元素,要一个个添加才可以。
  • io 管理的是一个数组,当元素出现或消失的时候,数组添加或删除该元素,并且执行该回调函数。
function query(selector) {
 return Array.from(document.querySelectorAll(selector));
}
var io = new IntersectionObserver(function(items) {
 items.forEach(function(item) {
 var target = item.target;
 if(target.getAttribute('src') == 'loading.png') {
  target.src = target.getAttribute('data-src');
 }
 })
});
query('img').forEach(function(item) {
 io.observe(item);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
node.js通过url读取文件
Oct 16 Javascript
node.js实现回调的方法示例
Mar 01 #Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 #Javascript
Angular2库初探
Mar 01 #Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 #Javascript
JavaScript两个变量交换值的实现方法
Mar 01 #Javascript
js实现仿购物车加减效果
Mar 01 #Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 #Javascript
You might like
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
实习医生自我评价
2013/09/22 职场文书
品管员岗位职责
2013/11/10 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
科学发展观演讲稿
2014/09/11 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
道德与公民自我评价
2015/03/09 职场文书
幼儿园教师求职信
2015/03/20 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python