安卓手机做网站,新手怎么优化网站,cms wordpress模板,惠州做网站 百度优化一、图片懒加载vue-lazyload是什么#xff1f; 背景#xff1a;
图片是非常占用页面渲染时间的#xff0c;尤其是一些图片比较多的页面#xff0c;过多的图片可能会造成页面的卡顿#xff0c;降低流畅度影响用户体验#xff0c;我们在实际开发中#xff0c;对于处于视口…一、图片懒加载vue-lazyload是什么 背景
图片是非常占用页面渲染时间的尤其是一些图片比较多的页面过多的图片可能会造成页面的卡顿降低流畅度影响用户体验我们在实际开发中对于处于视口外的图片在用户没有滚动到位置的时候没必要渲染此时我们就需要用到懒加载让图片延后渲染。 vue中有一个插件vue-lazyload它提供了一个“vue指令”可以完成上面需求
原理
一、获取视口底部位置在移动端可以使用 clientHeight 来获取到视口底部的像素值pc端可以使用getBoundingClientRect() 获取
二、收集所有img标签转成数组并保存当然实际开发中我们对获取方式还要加一些其他条件避免有些不需要懒加载的图片也被收集进来这里我就简单点了。
三、写个渲染函数用来处理图片的渲染逻辑主要逻辑是判断当前dom节点是否在视口内
二、使用步骤 1.安装vue-lazyload插件 代码如下示例
//npm
npm install vue-lazyload --save-dev//yarn
yarn add vue-lazyload//如果你是用Vue2.0,请不要用最新的版本可以指定支持Vue2.0的版本
//例如
yarn add vue-lazyload1.3.32.main.js中进行引用 代码如下示例
import VueLazyload from vue-lazyload;Vue.use(VueLazyload);//建议自定义配置插件设置相应的loading图和图片错误显示的统一图片
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require(../src/assets/lazy/error.png),
loading: require(../src/assets/lazy/loading.gif),
attempt: 1
})3.使用方法 代码如下示例分单图和多图的使用方式
//单图
img v-lazypsdimg///多图
div v-lazy-container{ selector: img }img data-srchttps://domo.com/1.pngimg data-src//https://domo.com/2.pngimg data-src//https://domo.com/3.pngimg data-src//https://domo.com/...png
/div
