Javascript图片懒加载

时间 2019-12-05

标签 javascript 图片加载栏目 JavaScript 繁體版

原文原文链接

原理

一开始将img标签的src设置为一张默认图片，将真实的图片地址放在data-src上，监听滚动事件，当图片进入可视区域时，写入src真实的图片地址。

如何判断图片进入了可视区域？

对于这样一个页面，图片即将进入页面的条件是：图片距离整个网页顶部的距离 < 浏览器可视区域的高度 + 滚动条滚动的距离。那么问题就能够分解成三个小点：css

①图片距离整个网页顶部的距离；

能够经过下面这个方法获取某个元素到网页顶部的距离：html

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

代码分析：
offsetTop表示的是元素距离父元素左上角顶点的高度，offsetParent则表示元素的父元素。经过不断遍历累加高度，就能够获得元素距离网页顶部的距离。浏览器

②浏览器可视区域的高度；

即window.innerHeight闭包

③滚动条滚动的距离。

即document.documentElement.scrollTopapp

懒加载如何实现？

html代码以下：函数

<!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>
    <link rel="stylesheet" href="./lazyLoad.css">
</head>
<body>
    <div class="wrapper">
        <img src="./default.jpg" data-src="./dog0.jpg">
        <img src="./default.jpg" data-src="./dog1.jpg">
        <img src="./default.jpg" data-src="./dog2.jpg">
        <img src="./default.jpg" data-src="./dog3.jpg">
        <img src="./default.jpg" data-src="./dog4.jpg">
        <img src="./default.jpg" data-src="./dog5.jpg">
        <img src="./default.jpg" data-src="./dog6.jpg">
    </div>
    <script src="./lazyLoad.js"></script>
</body>
</html>

这里只须要注意到开始时img标签的src属性放的是默认的图片，真正的图片地址放在了data-src中性能

css代码以下：优化

.wrapper {
    text-align: center;
}

img {
    display: block;
    margin: 10px auto;
}

js代码以下：ui

function lazyLoad () {
  let images = document.querySelectorAll('img');
  for(let i = 0; i < images.length; i++) {
    let image = images[i];
    if (getElementTop(image) <= window.innerHeight + document.documentElement.scrollTop) {
      image.src = image.getAttribute('data-src');
    }
  }
}

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

lazyLoad()；

window.onscroll =lazyLoad；

代码分析：
window.onscroll = lazyload表示在滚动条滚动时触发调用lazyLoad方法；spa

在lazyLoad方法中，先经过document.querySelectorAll('img');找到全部的Image（这里只是为了简化示例，实际场景中能够经过在须要懒加载的图片上添加统一的类名，而后经过querySelectorAll('.类名')来获取须要懒加载的图片),依次判断是否进入了可视区域内。若是进入了可视区域则作img标签的src的替换。

须要手动调用一次lazyLoad方法，在页面刚load的时候将已经在视窗内的图片加载出来。

函数节流

所谓的函数节流就是当事件触发的频率很高时，并非每次都须要去调用相对应的处理函数，以此来提升性能。好比这里的滚动事件，假设咱们但愿至少间隔200ms才调用一次处理函数，那么能够新增一个方法

function throttle (delay, action) {
  let last = 0;
  return function () {
    let now = new Date();
    if (now - last > delay) {
      action();
      last = now;
    }
  }
}

而后将window.onscroll =lazyLoad；改为window.onscroll = throttle(200, lazyLoad)。这个函数在事件触发时，先去判断本次触发的时间和上次触发的时间的间隔，若是大于delay，则运行处理函数。

函数用到了闭包的原理来保存last这个变量，对于闭包简单的解释一下就是throttle这个函数在调用结束后，原本应该销毁掉其内部的last变量，可是因为返回的是一个函数，返回的函数内引用了last这个变量，所以last被一直保存在了内存中。

throttle这个方法还有不少能够优化的地方，不在这里展开了。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。