懒加载和预加载的实现

提到前端性能优化中图片资源的优化，懒加载和预加载就不能不说，下面我用最简洁明了的语言，说明懒加载和预加载的核心要点以及实现。

1.懒加载

懒加载的要点如下：

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

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

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

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

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

如下所示：

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

类似上述代码所示，当需要时间，用js脚本控制图片的加载：

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

function lazyload () {
  // 获取所有要进行懒加载的图片
  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)

2.预加载

预加载的核心要点如下：

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

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

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

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

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

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

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

var xmlhttprequest = new XMLHttpRequest(); 
xmlhttprequest.open("GET",src,true);

 

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