懒加载

最新推荐文章于 2023-06-02 11:10:02 发布

00后程序猿

最新推荐文章于 2023-06-02 11:10:02 发布

阅读量157

点赞数

分类专栏：笔记文章标签： js

原文链接：https://blog.csdn.net/zl13015214442/article/details/88600300

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

dataset

HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。
举个例子：

<div id="today" 
  data-food="sushi" 
  data-meal="lunch">dinner</div>

而当我们想要获取这个属性时：

var today = document.getElementById('today');  
var typeOfFood = today.dataset.food;

懒加载

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。所以懒加载基本的原理就是用dataset自定义属性取代src存储图片的路径，然后在检测到图片进入到可视区域的时候，再将其换为src。那我们就来基本实现一下吧。

基本布局
首先将所有图片的src换为自定义属性data-src，这个时候图片是不显示的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      height: 600px;
      box-sizing: border-box;
      border: 1px solid black;
    }
    img {
      display: block;
      margin: 100px auto;
    }
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li>
      <img data-src="./图片懒加载/1.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/2.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/3.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/4.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/5.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/6.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/7.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/8.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/9.jpg" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/10.jpg" alt="">
    </li>
  </ul>
</div>
</body>
</html>

判断条件
window.innerHeight 可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。

<script>
  function imgonload() {
    let img = document.querySelectorAll("img");
    /*console.log(img);*/
    for(let i=0; i<img.length; i++) {
      if(img[i].getBoundingClientRect().top < window.innerHeight) {
        //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
        img[i].src = img[i].dataset.src;
      }
    }
  }

  function scollImg(fn) {
    let timer = null;
    let context = this;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context);
      }, 500)
    }
  }
  window.onload = imgonload;
  window.onscroll = scollImg(imgonload);
</script>

这样就完后了一个懒加载图片的效果了。

占位图
这样的懒加载图片的效果还不是很明显，我们通常会用一张占位图来显示该区域有图片即将加载出来（loading.gif），将所有图片的src设为占位图标，然后在滚动的时候图片进入可视区域src就会被替换成data-src中存的图片路径。完整的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      height: 600px;
      box-sizing: border-box;
      border: 1px solid black;
    }
    img {
      display: block;
      margin: 100px auto;
    }
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li>
      <img data-src="./图片懒加载/1.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/2.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/3.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/4.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/5.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/6.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/7.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/8.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/9.jpg" src="./图片懒加载/F1mjpV.gif" alt="">
    </li>
    <li>
      <img data-src="./图片懒加载/10.jpg" alt="">
    </li>
  </ul>
</div>
<script>
  function imgonload() {
    let img = document.querySelectorAll("img");
    /*console.log(img);*/
    for(let i=0; i<img.length; i++) {
      if(img[i].getBoundingClientRect().top < window.innerHeight) {
        //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
        img[i].src = img[i].dataset.src;
      }
    }
  }

  function scollImg(fn) {
    let timer = null;
    let context = this;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context);
      }, 500)
    }
  }
  window.onload = imgonload;
  window.onscroll = scollImg(imgonload);
</script>
</body>
</html>

00后程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
懒加载

datasetHTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。举个例子：<div id="today" data-food="sushi" data-meal="lunch">dinner</div>而当我们想要获取这个属性时：v.
复制链接

扫一扫

专栏目录