前端图片懒加载(lazyload)的实现方法(提高用户体验)


Posted in Javascript onAugust 21, 2017

定义

图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。

惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。

实现

懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。

判断是否存在于可视区

浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

var nodes = document.querySelectorAll('img[data-src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log('show')
}

之后获取图片的真实地址

<img src="loading.gif" alt="" data-src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

把真实地址赋给图片

var img = new Image();
img.onload = function(){
 elem.src = img.src;
}
img.src = src;

完整代码

var scrollElement = document.querySelector('.page'),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll('img[data-src]');
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src==='') return;
  rect = item.getBoundingClientRect();
  if(rect.bottom>=0 && rect.top < viewH){
    (function(item){
     var img = new Image();
     img.onload = function(){
      item.src = img.src;
     }
     img.src = item.dataset.src
     item.dataset.src = ''
    })(item)
  }
 })
}
lazyload();
scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));
function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
    } else {
      timeout = setTimeout(fun, delay);
    }
  };
};

总结

以上所述是小编给大家介绍的前端图片懒加载(lazyload)的实现方法(提高用户体验),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
详解Layer弹出层样式
Aug 21 #Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
JS实现评价的星星功能
Aug 20 #Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 #Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
prototype 的说明 js类
2006/09/07 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
js+html制作简单验证码
2017/02/16 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python标准库sched模块使用指南
2017/07/06 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
客服工作职责
2013/12/11 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
离婚协议书怎么写
2014/09/12 职场文书
品质保证书格式
2015/02/28 职场文书
搞笑婚前保证书
2015/02/28 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
正则表达式拆分url实例代码
2022/02/24 Java/Android