懒加载和预加载

懒加载和预加载

懒加载

场景：对于图片过多的页面，为了加快页面加载速度，需要将页面内未出现的可视区域内的图片先不做加载，等到滚动可视区域后再去加载。

原理：img标签的src属性用来表示图片的URL，当这个属性值不为空时，浏览器就会根据这个值发送请求，如果没有src属性就不会发送请求。所以，在页面加入时将img标签的src指向为空或者指向一个小图片（loading或者缺省图），将真实地址存在一个自定义属性data-src中，当页面滚动时，将可视区域的图片的src值赋为真实的值。

核心代码：

 <img src="https://i.loli.net/2017/08/08/5989307b6c87b.gif" data-xxx="${data.content[i].url}">

let images = document.querySelectorAll('img[data-xxx]')
for(let i = 0; i <images.length; i++){
  if(/* 出现在屏幕里(images[i]) */){
  // 一般判断这个高度用到高度有:浏览器高度,文档高度,滚动的高度
    images[i].src = images[i].getAttribute('data-xxx')
    images[i].removeAttribute('data-xxx')
  }
}

预加载

场景：图鼠标移入一张图片时，换成另一张图片，移出时换回原来的图片，正常做法是，鼠标移入的时候，改变图片的src，但这时就要去加载图片了，会等待一段时间，这样体验不好。预加载的做法是，在页面加载完，鼠标移入之前就通过Image对象把图片加载进缓存了，这样鼠标移入的时候直接从缓存里读取了，速度很快，解决此问题的方案就是实现图片预加载。
原理：事先把网页的图片记载到本地，之后就直接到缓存中拿图片
实现方法一般有三种：

1、使用CSS进行图片预加载

原理：将需要加载的图片作为标签的背景图预先加载出来，但是不显示在可视区域内
缺点：加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间

核心代码：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将这三个元素应用到HTML元素中，就可以通过CSS的background属性将图片预加载到屏幕外的背景上，当它们在页面的其他地方被调用时，浏览器就会在渲染中使用预加载的图片地址。

2）、使用CSS+JS进行图片预加载

为了解决上述问题，可以增加一些JS代码来推迟加载的时间，直到页面加载完毕
核心代码：

function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);