Vant图片懒加载Lazyload的应用

图片懒加载

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

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

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

图片懒加载

图片懒加载的原理

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

使用步骤

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

    import Vue from 'vue'
    import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
    Vue.use(Lazyload) // 注册懒加载指令
    
  2. 为van-image设置lazy-load指令属性

    示例代码

<!-- lazy-load设置图片懒加载,是一个自定义指令 -->
 <van-image width="90" height="90" :src="item2" lazy-load/>

注意

  1. 可以通过浏览器调试工具firebug筛选请求类型并查看。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页