浏览器中图片的懒加载与预加载

图片的懒加载和预加载

一、懒加载

1.什么是懒加载？

懒加载是在用户滚动页面的时候自动获取更多的数据的一种加载方式。新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。我们通常先把<img>元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，即可正常显示图片。

2.优点

当一个页面的图片较多时（如淘宝首页），在首次载入时一次性加载所有图片会耗费过多的时间，影响用户体验。而使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。

3.实现思路

将图片的src设为空，同时设置一张底图，当图片还没加载完时，用这张底图来占图片的位置，防止页面结构混乱。再给一个自定义的“data-orina”l属性，用来存放图片的真实路径。“lazyload”属性用来标明哪些图片是需要懒加载。同时要为这些标签设置滚动监听事件，只有当图片出现在可视区时，才动态地将图片的真实地址赋予图片的“src”属性，从而达到懒加载的目的。

4.实现方法举例

实现代码如下所示：

/*------方法一，原生js实现------*/
let viewHeight = document.documentElement.clientHeight // 获取可视区域的高度

function lazyload () {
   
  let eles = document.querySelectorAll('img[data-original][lazyload]')
  Array.prototype.forEach.call(eles, function (item, index) {
    // 为每一个图片都绑定一个回调函数，当scroll时执行
    let rect
    if (item.dataset.original === '') // 图片已经加载了，直接返回
      return
    rect = item.getBoundingClientRect