懒加载与预加载

发表于 | 分类于
字数统计: 1.1k字 | 阅读时长 ≈ 4分钟

懒加载和预加载都是前端性能优化中对于图片的优化。从而使得用户有更好的上网体验

一、懒加载

1.1HTML中的懒加载方式

懒加载就是在延迟加载。一般的做法是不设置或者设置一个相同的图片src用来占位。并且将真正需要加载的图片地址放在img标签自定义的属性中（如：data-origin）。正如很多电商平台的做法，等到用户将浏览器的时候滑至该图片的位置上时，这时候由js监听并且将自定义属性中的值存放在src中。这时候图片才开始加载。由此达到懒加载的效果。这样做的目的也是为了防止页面一次请求浏览器的数据量服务的数据量过大导致后面的一些js因为图片的渲染迟迟不能被执行导致出现一些错误，同时也能够防止服务器响应慢，卡顿的问题。而且一般情况下用户访问页面的长度不会太大，如果都一次性请求所有的资源的话会造成很大的带宽浪费。所以才会采用懒加载的方式进行。这样可以避免很多无效的请求和加载。

懒加载的具体步骤是：

  1. 在图片的img标签里src置为空或者直接防止一个默认的地址，真正的地址放在自己定义的标签属性名里。
  2. 页面加载完成后，根据用户的滑屏情况进行判断图片的位置是否在用户当前的视野内。如果在，就将data-origin置为真实的值。
  3. 当用户滑动视野的时候判断图片是否进入视野，如果进入就将data-origin的值放在src中，并且将之前自定义的属性删除。

接下来通过一个实例来说明懒加载判断图片是否进入可视范围从而加载图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
    <div id="root">啊啊啊啊啊啊A啊啊啊啊啊</div>
    <!-- 若干行标签 -->
    <div id="root">啊啊啊啊啊啊A啊啊啊啊啊</div>
    <img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />

</body>
<script>
var viewHeight = document.documentElement.clientHeight // 可视区域的高度

function lazyload () {
  // 获取所有要进行懒加载的图片
  var eles = document.querySelectorAll('img[data-original][lazyload]')
  Array.prototype.forEach.call(eles, function (item, index) {
      console.log(item)
    var rect
    if (item.dataset.original === '')
      return
    rect = item.getBoundingClientRect()
    // 图片一进入可视区，动态加载
    if (rect.bottom >= 0 && rect.top - 40< 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)

首先这里定义了很多个div标签，是得在最下方的图片由于不在视野范围内所以暂时不进行加载。等到当用户滑动屏幕到图片的上边位置距离视野上方位置50像素的时候，图片的src被设置，同时进行没图片的加载。这里就实现了这个图片的懒加载。这楼里需要注意的是，在监听用户滑动的时候，我们用到了getBoundingClientRect这个函数，起作用是获取某个元素相对于视窗的位置。获得的都是某个元素的上下左右距离上边试图或者左边视图的距离。

1.2Vue上实现的懒加载

在Vue中，懒加载一般会使用插件vue-lazyload来实现，首先需要安装这个插件

1
npm install vue-lazyload

在入口文件main.js中直接引用并使用。

1
import VueLazyLoad from 'vue-lazy

之后在这里直接使用这个模块：

1
Vue.use(VueLazyLoad)

当然也可以根据官方文档中提供的API自定义选项：

1
2
3
4
Vue.use(VueLazyLoad,{
   error:'dist/error.png',
   loading:'dist/loading.png'
})

同时在标签上修改图片的显示方式为懒加载的方式,注意这里是直接将src改成v-lazy：

1
<img v-lazy="/static/img/"+item.productImage/>
0%