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类和继承 this属性使用说明
Sep 03 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python 中文字符串的处理实现代码
2009/10/25 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python代码实现KNN算法
2017/12/20 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python中字符串内置函数的用法总结
2018/09/13 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python实现对adb命令封装
2020/03/06 Python
Python实现仿射密码的思路详解
2020/04/23 Python
详细分析Python垃圾回收机制
2020/07/01 Python
几款好用的python工具库(小结)
2020/10/20 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
大学生党员个人总结
2015/02/13 职场文书
法务专员岗位职责
2015/02/14 职场文书
个人年底工作总结
2015/03/10 职场文书
手机销售员岗位职责
2015/04/11 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers