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 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
基于JavaScript实现留言板功能
Mar 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python脚本监控docker容器
2016/04/27 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python tkinter控件布局项目实例
2019/11/04 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
网页美工求职信
2014/02/15 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
青岛导游词
2015/02/12 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
小学毕业感言200字
2015/07/30 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python