懒加载和预加载

懒加载

延迟加载的三种方式

懒加载概念

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式；

用户滚动到它们之前，可视区域外的图像不会加载，可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

懒加载的优点

能提升用户的体验，减少首屏加载时间

减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担

防止并发加载的资源过多会阻塞js的加载

实现懒加载

关于页面尺寸的补充知识

可视区高度：window.innerHeight / document.documentElement.clientHeight（document.documentElement 指根元素html）/ document.body.clientHeight

浏览器窗口与文档顶部之间的距离，也就是滚动条滚动的距离：window.scrollY / window.pageYOffset / document.documentElement.scrollTop

元素离文档顶部的距离：获取元素的 offsetTop 属性

初始版本懒加载

原理：

将页面上的图片的 src 属性设为空字符串或者 loading.gif ，而图片的真实路径则设置在 data-src 属性中，当页面滚动的时候需要去监听 scroll 事件，在 onscroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为 data-src 的值。

代码

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>
  <style>
    img{
      display: block;
      margin-bottom: 50px;
      height: 200px;  /*写高度为了占位置*/
    }
  </style> 
</head>
<body>
  <img src="images/loading.gif" data-src="images/1.png">
  <img src="images/loading.gif" data-src="images/2.png">
  <img src="images/loading.gif" data-src="images/3.png">
  <img src="images/loading.gif" data-src="images/4.png">
  <img src="images/loading.gif" data-src="images/5.png">
  <img src="images/loading.gif" data-src="images/6.png">
  <img src="images/loading.gif" data-src="images/7.png">
  <img src="images/loading.gif" data-src="images/8.png">
  <img src="images/loading.gif" data-src="images/9.png">
  <img src="images/loading.gif" data-src="images/10.png">
  <img src="images/loading.gif" data-src="images/11.png">
  <img src="images/loading.gif" data-src="images/12.png">
  <script>
    function lazyloadGenerator(){
      var images = document.querySelectorAll('img')
      var len = images.length
      var n = 0 // 存储图片加载到的位置，利用一个闭包优化遍历
      return function(){
        var seeHeight = document.documentElement.clientHeight
        var scrollTop = document.documentElement.scrollTop
        for(var i=n;i<len;i++){
          if(images[i].offsetTop < seeHeight+scrollTop){
            if(images[i].getAttribute('src')=== "images/loading.gif"){
              images[i].src = images[i].getAttribute('data-src')
            }
            n++
          }
        }
      }
    }
    var lazyload = lazyloadGenerator()
    lazyload() // 初始化加载首屏图片
    window.onscroll = lazyload
  </script>
</body>
</html>

使用节流进行优化的懒加载

原理：onscroll 的回调使用节流函数，可以减少事件触发次数，优化性能

代码

利用 IntersectionObserver API 实现懒加载

代码简洁，但是有的浏览器不支持

IntersectionObserver API 使用教程

代码

预加载

懒加载和预加载

预加载的概念

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

预加载的优点

图片预先加载到浏览器中，提升用户的浏览体验

实现预加载

控制 css 实现

原理：

使用 css 设置 div 的 background 或者设置 img 为 display: none; ，目的就是加载图片资源但不显示在页面中
然后使用 JS onload事件控制在当前页面加载完后再去请求资源

代码

javascript

// 监听当前页面资源的加载
function addload(func){
    var oldload = window.onload
    if(typeof onload !== 'function'){
        window.onload = func
    }else{
        window.onload = function(){
            oldload()
            func()
        }
    }
}

function preload(){
    document.querySelector('div#img').style.background = "url(./images/1.png) 1000px 1000px" // 设置背景偏移
}

addload(proload)

使用 JS 实现

原理：创建 Image 实例

代码

javascript

var images = new Array()
function preload() {  
    for (i = 0; i < preload.arguments.length; i++) {  
        images[i] = new Image()  
        images[i].src = preload.arguments[i]  
    }  
}  

preload(
    "./images/1.png",
    "./images/2.png"
)
// 还可以用 addload 封装一下在当前页面加载完再去请求资源
addload(preload)

使用 AJAX 实现

原理：

不仅可以加载图片，还可以加载 css , js
而且加载不会影响当前的页面

代码

javascript

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://geekjc.com/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://geekjc.com/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://geekjc.com/preload.png";  
    }, 1000);  
};

使用 preload JS 库实现

preload JS