欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-03 08:17:29
本文实例讲述了javascript实现图片懒加载的方法。分享给大家供大家参考,具体如下: 懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图...

本文实例讲述了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运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

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