Vant图片懒加载Lazyload的应用

图片懒加载

有时候一个网页会包含很多图片，页面图片多，加载的图片就多，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。

为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。懒加载可以降低不必要的服务器资源开销。

给文章图片设置懒加载，使得浏览器视野中出现的图片才加载，没有出现的滞后载入。

图片懒加载

图片懒加载的原理：

• 一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

使用步骤：

1. 在main.js中导入Vant中的Lazyload指令并注册：

   import Vue from 'vue'
   import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
   Vue.use(Lazyload) // 注册懒加载指令
   

2. 为van-image设置lazy-load指令属性

   示例代码：

 <van-image width="90" height="90" :src="item2" lazy-load/>

注意：

1. 可以通过浏览器调试工具firebug筛选请求类型并查看。