超简单直观理解懒加载(Lazyload)

懒加载

  • 什么是懒加载
  • 懒加载的作用
  • 简单的实现
  • 未来

什么是懒加载

懒加载,即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候,如果在进入页面的时候一次性把所有图片加载完,需要很长的时间。为了提升用户体验,我们使用懒加载,当图片出现在浏览器可视区域时,才加载图片。例如各种电商页面。

懒加载的作用

  • 加快页面打开速度,提升用户体验
  • 减少服务器压力和浏览器的负担

简单的实现

1、我们先来看看一次性加载20张图片,要用多少时间。


<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Lazyloadtitle>
	    <style>
	      img {
	        display: block;
	        height: 200px;
	      }
	    style>
	head>
	<body>
	    <img src="./5.1.png">
	    <img src="./7.1.png">
	    <img src="./8.1.png">
	    <img src="./10.1.png">
	    <img src="./10.2.png">
	    <img src="./10.3.png">
	    <img src="./10.4.png">
	    <img src="./12.1.png">
	    <img src="./12.2.png">
	    <img src="./12.3.png">
	    <img src="./12.4.png">
	    <img src="./12.5.png">
	    <img src="./12.6.png">
	    <img src="./12.7.png">
	    <img src="./12.8.png">
	    <img src="./12.9.png">
	    <img src="./12.10.png">
	    <img src="./12.11.png">
	    <img src="./12.12.png">
	    <img src="./12.13.png">
	    <script>
	    script>
	body>
html>

超简单直观理解懒加载(Lazyload)_第1张图片
我们把图片资源全部写在img的src里。这时候则一次性加载了全部。所用时间220ms。

2、我们再来看加载20个一样的图片,要用多少时间。

// 把上面代码的img替换成:
	<img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">
    <img src="./loading.png">

超简单直观理解懒加载(Lazyload)_第2张图片
我们可以看到,虽然这张图片展示了20次,但是由于都是同一个资源,所有浏览器只请求了一次。用时85ms。

3、经过上面的实验,我们可以理解一下懒加载的原理。就是只加载页面上你看得到的图片。你还没滚动到的图片不加载,都用loading图片这一张图片代替。那么实际上我们进入页面的时候,只加载了一张loading图片和浏览器可视区域的n张图片。

<img src="./loading.png" data-src="./5.1.png">
<img src="./loading.png" data-src="./7.1.png">
<img src="./loading.png" data-src="./8.1.png">
<img src="./loading.png" data-src="./10.1.png">
<img src="./loading.png" data-src="./10.2.png">
<img src="./loading.png" data-src="./10.3.png">
<img src="./loading.png" data-src="./10.4.png">
<img src="./loading.png" data-src="./12.1.png">
<img src="./loading.png" data-src="./12.2.png">
<img src="./loading.png" data-src="./12.3.png">
<img src="./loading.png" data-src="./12.4.png">
<img src="./loading.png" data-src="./12.5.png">
<img src="./loading.png" data-src="./12.6.png">
<img src="./loading.png" data-src="./12.7.png">
<img src="./loading.png" data-src="./12.8.png">
<img src="./loading.png" data-src="./12.9.png">
<img src="./loading.png" data-src="./12.10.png">
<img src="./loading.png" data-src="./12.11.png">
<img src="./loading.png" data-src="./12.12.png">
<img src="./loading.png" data-src="./12.13.png">

<script>
  function lazyload(){
    var imagesList = document.getElementsByTagName('img');  // 获取所有图片列表
    var length = imagesList.length; // 一共有多少张图片
    var n = 0; // n用来保存之前已经加载过的多少张图片,就可减少下面遍历的次数
    return function(){
      var clientHeight = document.documentElement.clientHeight;  // 浏览器可视区域的高度
      var scrollTop = document.documentElement.scrollTop;  // 页面被遮挡的高度
      for(var i = n;i<length;i++){
        if(imagesList[i].offsetTop<clientHeight+scrollTop){ // offsetTop获取图片顶部相对于页面顶部的距离,当它小于浏览器可视区域的高度和页面被遮挡的高度之和时,加载图片
          if(imagesList[i].getAttribute('src')==='./loading.png'){ //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src
            imagesList[i].src = imagesList[i].getAttribute('data-src');
          }
          n = n + 1;
        }else{
          break;
        }
      }
    }
  }
  var a = lazyload();
  a();
  window.addEventListener('scroll', a, false); // 监听页面滚动事件,执行lazyload函数。
script>

我们通过计算浏览器的高度clientHeight和页面的被遮挡的高度scrollTop的和,再计算图片的顶部与该页面顶部的距离offsetTop,最后比较它们的大小。使还未出现在页面中的图片不加载,来实现懒加载。看看效果,我们的可视区域只有3张图片,一共加载的图片资源为1张loading图片和3张可视区域的图片,共用时90ms。相对于不使用懒加载,一次性加载20张图片的220ms,节省了用户的130ms的等待时间。在图片量多的网站中,效果更为明显。
超简单直观理解懒加载(Lazyload)_第3张图片
参考资料:
延迟加载(Lazyload)三种实现方式

未来

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg
Chromium 官方支持的 image 懒加载将在 Chrome 75 发布,也就是说,将来只需要使用 就可以指定某个图片只在滚动到附近的时候加载。

你可能感兴趣的:(超简单直观理解懒加载(Lazyload))