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 正则表达式相关应介绍
Nov 27 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
layui下拉框获取下拉值(select)的例子
Sep 10 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中实现进程间通讯
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
vue cli 全面解析
2018/02/28 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python 动态加载的实现方法
2017/12/22 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Php多进程实现代码
2018/05/07 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python3 读取Excel表格中的数据
2018/10/16 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python实现拼接图片
2020/03/23 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
日期和时间问题
2015/01/04 面试题
公立医院改革实施方案
2014/03/14 职场文书
工地质量标语
2014/06/12 职场文书
伦敦奥运会口号
2014/06/13 职场文书