js懒加载[改进版]

最新推荐文章于 2022-12-05 11:06:54 发布

maya1024

最新推荐文章于 2022-12-05 11:06:54 发布

阅读量132

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/high32/article/details/111595323

版权

javascript 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

js懒加载[改进版]

前言
目前懒加载存在的一些问题:
一、效果
二、代码示例

前言

看到有分享了懒加载图片,自己也尝试了一下,还是发现有一些不完美,在此完善了一下,还请批评指正.

目前懒加载存在的一些问题:

1.图片虽然都没赋地址,但也全都显示了出来,滚动条一次性变得特别长,占了网页空间,图片加载失败时还出来失败的显示,不美观;
2.每次滑动滚轮,每张图片都会重复一次赋图片地址,感觉没必要;
3.为什么不采用js新增图片的方法,因为图片的地址可能不是有规律的,这样就导致js赋图片地址的时候有点麻烦,我们追求简单.
4.考虑是否存在父级元素.

一、效果

在这里插入图片描述

二、代码示例

感觉写得已经相当详细了…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    img{
      display: none;
      /* 先让所有的图片都隐藏 */
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <img src="" temp-src="img/4K1.jpg">
  <img src="" temp-src="img/4K2.jpg">
  <img src="" temp-src="img/4K3.jpg">
  <img src="" temp-src="img/4K4.jpg">
  <img src="" temp-src="img/4K5.jpg">
  <img src="" temp-src="img/4K6.jpg">
  <img src="" temp-src="img/4K7.jpg">
  <img src="" temp-src="img/4K8.jpg">
  <img src="" temp-src="img/4K9.jpg">
  <img src="" temp-src="img/4K10.jpg">
</body>
</html>
<script type="text/javascript">
let oImg = document.getElementsByTagName("img");
  for(let i = 0; i < oImg.length; i++){
    oImg[i].flag = false;//设置一个属性都为false
  }
  function lazyLoad(){
    let h = document.documentElement.clientHeight || window.innerHeight;
    let s = document.body.scrollTop || document.documentElement.scrollTop;

    for(let i = 0; i < oImg.length; i++){
      if(i == 0 && !oImg[0].flag){//只在第一次进入本次判断
        oImg[0].style.display = "block";
      }else if(i - 1 >= 0 && oImg[i - 1].flag){//判断如果上一个图片flag属性是true的话才让本次图片显示
        oImg[i].style.display = "block";
      }else{
        continue;//如果上个图片flag属性是false的话直接跳出本层循环,这里不用break,不然下次滚动时也不执行这个函数了.
      }
      if(!oImg[i].flag && getTop(oImg[i]) < h + s){//如果上次flag属性为true,说明图片已经显示出来了,不用再二次赋值src属性
        oImg[i].flag  = true;//把本次的flag属性改为true;
        oImg[i].src = oImg[i].getAttribute("temp-src");//设置图片属性
      }
    }
  }
  function getTop(ele){//判断是否有父级元素
    let t = ele.offsetTop;
    while(ele.offsetParent){
       ele = ele.offsetParent;
      t += ele.offsetTop;//把所有父级元素的高度相加
    }
    return t;
  }
  lazyLoad();//开始先加载
  window.onscroll = function(){
    lazyLoad();//滚动时再加载
  }

</script>