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 相关文章推荐
javascript两种function的定义介绍及区别说明
May 02 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
canvas实现贪食蛇的实践
Feb 15 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 创建标签云函数代码
2010/05/26 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
PHP时间类完整代码实例
2021/02/26 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python实现的特征提取操作示例
2018/12/03 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python实现简单银行管理系统
2019/10/25 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
python statsmodel的使用
2020/12/21 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
十佳家长事迹材料
2014/08/26 职场文书
房屋维修申请报告
2015/05/18 职场文书
检察院起诉意见书
2015/05/20 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL