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

图片的懒加载和预加载

一、懒加载

1.什么是懒加载？

懒加载是在用户滚动页面的时候自动获取更多的数据的一种加载方式。新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。我们通常先把元素的背景图片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() // 获取某个元素相对于视窗的位置集合

    if (rect.bottom >= 0 && rect.top < viewHeight) { // 图片已经进入了可视区域
      !function () {
        let img = new Image()
        img.src = item.dataset.original // 将data-original属性中的内容添加到src中
        img.onload = function () {
          item.src = img.src
        }
        item.removeAttribute('data-original') // 图片已经加载成功，删除懒加载属性
        item.removeAttribute('lazyload')
      }()
    }
  })
}

lazyload() // 页面加载时调用，如果不调用会出现首屏无法加载图片的问题

document.addEventListener('scroll', lazyload) // 滚动条滚动时，调用lazyload()

/*------方法二，jquery实现------*/
// jquery封装了懒加载方法，直接调用lazyload()即可,实现原理和上述代码类似
$('img[data-original][lazyload]').lazyload() 

二、预加载

1.什么是预加载？

预加载是在用户未浏览到相关图片之前，提前加载图片的一种方法，当用户需要查看图片时可直接从本地缓存中读取相关图片进行渲染。

2.优点

进行预加载时图片预先加载到浏览器中，这对图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时操作得到最快的反映。

3.实现方法

实现预载的方法非常多，比如：使用Image对象实现，使用ajax请求实现，使用相关框架实现（如Preload.js）

4.上述方法的demo

/*---方法一：使用XMLHttpRequest对象---*/
var xmlhttprequest = new XMLHttpRequest()
xmlhttprequest.onreadystatechange = callback
xmlhttprequest.onprogress = progressCallback
xmlhttprequest.open("GET","http://image.baidu.com/mouse.jpg",true)
xmlhttprequest.send()

function callback () {
  if (xmlhttprequest.readyState === 4 && xmlhttprequest.status === 200){
    var responseText = xmlhttprequest.responseText
  }else{
    console.log("Request was unsuccessful: " + xmlhttprequest.status)
  }
}

function progressCallback (e) {
  e = e || event;
  if (e.lengthComputable){
      console.log("Received " + e.loaded + " of " + e.total + " bytes")
  }
}

/*---方法二：使用Image对象---*/
let image = new Image()
image.src = "http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg"



/*---方法三：使用preload.js等框架---*/
let queue = new createjs.LoadQueue(false)
queue.on("complete", handleComplete, this)

queue.loadManifest([
  {id: "myImage", src:"http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg"},
  {id: 'myImage2', src:"http://pic9.nipic.com/20100814/2839526_193147158170_2.jpg"}
]);
function handleComplete() {
    let image = queue.getResult("myImage")
    document.body.appendChild(image)
 }

总结

懒加载：
1.仅显示可视区的图片资源，不可见区域的资源暂不请求。
2.使用懒加载可以减少页面的加载时间。
3.适用用于需要大量图片的页面。

预加载：
1.图片等静态资源在使用前提前请求。
2.资源后续使用可以直接从缓存中加载，提升用户体验。