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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
微信小程序支付前端源码
Aug 29 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
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静态新闻列表自动生成代码
2007/06/14 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
JS按回车键实现登录的方法
2014/08/25 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
Python入门篇之对象类型
2014/10/17 Python
理解Python中的类与实例
2015/04/27 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Tornado 多进程实现分析详解
2018/01/12 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python实现KNN近邻算法
2020/12/30 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
大学生社会实践方案
2014/05/11 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL