JavaScript实现图片懒加载的方法分析


Posted in Javascript onJuly 05, 2018

本文实例讲述了JavaScript实现图片懒加载的方法。分享给大家供大家参考,具体如下:

懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载。

我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中。

HTML代码

<div class="container">
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img1.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img2.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img3.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img4.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img5.png">
 </div>
</div>

判断元素是否在可视区域

方法一:

1. 获取屏幕可视区高度:document.documentElement.clientHeight
2. 获取元素距顶部的高度:element.offsetTop
3. 获取滚动高度:document.documentElement.scrollTop
4. 若满足:2-3<1,那么元素就出现在可视区域

方法二:

1. 获取元素到可视区域顶部的距离:var bound = element.getBoundingClientRect()
2. 获取可视区域的高度:window.innerHeight
3. 若满足bound.top<=window.innerHeight,那么元素就出现在可视区域

方法三:

利用IntersectionObserver函数自动观察元素是否在可视区域内

var watch = new IntersectionObserver(callback,option);
//开始观察
watch.observe(el);
//停止观察
watch.unobserve(el);
//关闭观察器
watch.disconnect();

js代码

第一种很多人都用过,所以我们就用第二种写一下

//判断图片是否出现在可视区域内
function isInSight(el) {
    const bound = el.getBoundingClientRect();
    const clientHeight = window.innerHeight;
    return bound.top <= clientHeight + 100;
}
//加载图片
let index = 0;
function checkImgs() {
    const imgs = document.querySelectorAll('.my-photo');
    for( let i = index; i < imgs.length; i++){
      if(isInSight(imgs[i])){
        loadImg(imgs[i]);
        index = i;
      }
    }
}
function loadImg(el) {
    if(!el.src){
      const source = el.dataset.src;
      el.src = source;
    }
}
//函数节流
//函数节流是很重要的思想,可以防止过于频繁的操作dom
function throttle(fn,mustRun = 500) {
    const timer = null;
    let previous = null;
    return function () {
      const now = new Date();
      const context = this;
      const args = arguments;
      if(!previous){
        previous = now;
      }
      const remaining = now -previous;
      if(mustRun && remaining >= mustRun){
        fn.apply(context,args);
        previous = now;
      }
    }
  }
//调用函数
window.onload=checkImgs;
window.onscroll = throttle(checkImgs);

我们在用第三种方法写一个demo

function checkImgs() {
 const imgs = Array.from(document.querySelectorAll(".my-photo"));
 imgs.forEach(item => io.observe(item));
}
function loadImg(el) {
 if (!el.src) {
  const source = el.dataset.src;
  el.src = source;
 }
}
const io = new IntersectionObserver(ioes => {
 ioes.forEach(ioe => {
  const el = ioe.target;
  const intersectionRatio = ioe.intersectionRatio;
  if (intersectionRatio > 0 && intersectionRatio <= 1) {
   loadImg(el);
  }
  el.onload = el.onerror = () => io.unobserve(el);
 });
});

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 #Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 #Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 #Javascript
vue两个组件间值的传递或修改方式
Jul 04 #Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 #Javascript
You might like
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
javascript 常用方法总结
2009/06/03 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JQuery live函数
2010/12/24 Javascript
javascript event 事件解析
2011/01/31 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
javascript常见用法总结
2014/05/22 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Django Highcharts制作图表
2016/08/27 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python+flask实现API的方法
2018/11/21 Python
Python流程控制 if else实现解析
2019/09/02 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
区域销售经理职责
2013/12/22 职场文书
党支部工作总结2015
2015/04/01 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python