图片的懒加载与预加载

提到前端性能优化中图片资源的优化，懒加载和预加载就不能不说。

懒加载的要点如下：

1.图片进入可视区域之后请求图片资源；

2.对于电商等图片较多，页面很长的业务场景很适用；

3.可以减少无效资源的加载；

4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用；

如何实现懒加载呢？要点就是html中img标签src属性为空，给一个data属性，里面存放图片真实地址，在需要的时候，动态的将这个地址赋予图片src属性。

<img src="" class="image-item"lazyload="true" data-original="http://pic26.nipic.com/2.jpg"/>

当需要时，用js脚本控制图片的加载：

varviewHeight = document.documentElement.clientHeight // 可视区域的高度

functionlazyload () {

  // 获取所有要进行懒加载的图片

  var eles =document.querySelectorAll('img[data-original][lazyload]')

  Array.prototype.forEach.call(eles, function(item, index) {

    var rect

    if (item.dataset.original === '')

      return

    rect = item.getBoundingClientRect()

    // 图片一进入可视区，动态加载

    if (rect.bottom >= 0 && rect.top< viewHeight) {

      !function () {

        var img = new Image()

        img.src = item.dataset.original

        img.onload = function () {

          item.src = img.src

        }

        item.removeAttribute('data-original')

        item.removeAttribute('lazyload')

      }()

    }

  })

}

// 首屏要人为的调用，否则刚进入页面不显示图片

lazyload()

document.addEventListener('scroll',lazyload)

预加载的核心要点如下：

1.图片等静态资源在使用之前的提前请求；

2.资源后续使用时可以从缓存中加载，提升用户体验；

3.页面展示的依赖关系维护（必需的资源加载完才可以展示页面，防止白屏等）；

实现预加载主要有三个方法：

1.html中img标签最初设置为display:none；

2.js脚本中使用image对象动态创建好图片；

3.使用XMLHttpRequest对象可以更加精细的控制预加载过程，缺点是无法跨域：

varxmlhttprequest = new XMLHttpRequest();

xmlhttprequest.open("GET",src,true);

关心一下dataset：http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

转载自：https://www.cnblogs.com/Cathamerst/p/7445715.html