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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
AngularJS 控制器 controller的详解
Oct 17 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
原生js实现放大镜组件
Jan 22 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 curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
React实现todolist功能
2020/12/28 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python for 循环获取index索引的方法
2019/02/01 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
用Python解数独的方法示例
2019/10/24 Python
tensorflow常用函数API介绍
2020/04/19 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
保险公司演讲稿
2014/09/02 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android