图片懒加载

时间 2019-11-12

标签图片加载繁體版

原文原文链接

1、什么是懒加载技术？html

定义：这张图片很懒，喜欢临时抱佛脚，都到了出如今屏幕视线范围内了才加载。不过懒人有懒福，这样能够在那种有大量图片须要展现的网站上优化性能，减轻浏览器压力，毕竟你要浏览器一次加载一两百张图片也很累浏览器

2、为什要使用这个技术？服务器

这样作能防止页面一次性向服务器发送大量请求，致使服务器响应慢，页面卡顿崩溃等。好比一个页面中有不少图片，如淘宝、京东首页等等，若是一上来就发送这么多请求，页面加载就会很漫长，若是js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就很差办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两我的在访问这个页面）。所以优势就很明显了：不只能够减轻服务器的压力，并且可让加载好的页面更快地呈如今用户面前（用户体验好）。

3、怎么实现？app

原理：先将img标签的src连接设为同一张图片（好比空白图片），先把图片地址存储在一个临时属性上，而后将真正的图片地址存储在data-src中，当用浏览器的onscroll事件监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。工具

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

<!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>

<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>
————————————————