本文主要介绍了如何在vue中使用图片的懒加载，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
前言1。相关软件包的安装。使用步骤1。导言2。用法3。包装的相关组件1。简介2。简单操作总结。
前言
什么是懒加载
通俗地说，在需要镜像的时候进行懒加载的好处就是减轻了服务器的压力。当网络较慢时，您可以提前在此图像中添加一个占位符图像，以改善用户体验。
一、安装相关的包
安装延迟加载所需的包。
npm安装vue-lazyload -保存
二、使用步骤
1.引入将包引入到项目的入口文件中，然后注册它。
代码如下(示例):
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
//引入插件
从“vue-lazyload”导入VueLazyload
//注册插件
Vue.use(VueLazyload，{
加载： 3359 www.keaidian.com/uploads/allimg/190424/24110307 _ 8 . jpg //懒加载默认图片
})
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
一些参数的解析：
PreLoad:表示lazyload的元素，它是距页面底部距离的百分比。计算值为(preload-1)，默认值为1.3错误：对于表格加载显示失败的图片，需要传入一个字符串作为解析加载：对于表格加载显示成功的图片，需要传入一个字符串作为解析尝试：图片加载失败后的重试次数，需要传入一个数字。
您可以使用以下代码来修改延迟加载方式：
img[lazy=loading]{
显示：块；
宽度：150px！重要；
身高：150px！重要；
边距：0自动；
}
这样的风格可以根据自己的需求来确定，不一定非要配置。
详见：https://www.npmjs.com/package/vue-lazyload。
2.使用在创建的项目中简单使用。
使用(:src-v-lazy)
代码如下（示例）：
模板
div id=应用程序
img alt=Vue logo src=。/assets/logo.png /
br /
img v-lazy=a？img[0]:img[1] @ click= change img /
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
答：没错，
img: [
//图片1
https://tse 1-mm . cn . bing . net/th/id/OIP-C . ethkvrgfkigb 1 tenrfhiyqhalh？w=186h=279 c=7r=0o=5d pr=1.25 PID=1.7 ，
//图片2
https://tse 2-mm . cn . bing . net/th/id/OIP-c . zptupewvwiucwgjsi 93 yl whalg？ w=186h=279 c=7r=0o=5d pr=1.25 PID=1.7
]
}
},
方法：{
changeImg() {
this.a=！这. a
}
}
}
/脚本
风格
#app {
字体系列：Avenir，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
如果是圆形图片，我们需要指定一个键值，例如：
img v-lazy= img . src :key= img . src
观察是否实现懒加载
1.首先，你需要运行项目。
在控制台输入npm run serve。
2.导航到相关目录并打开开发人员调试(F12)
3.找到“网络选项”，把网络改成慢3G，然后打开禁用缓存。
4.刷新界面，观察画面的变化。
三、关于包的相关构成
1. 简单介绍该包的主要组件通过使用定制插件和定制指令来实现。
2. 简单操作在src文件夹下创建一个plugins的文件夹，用来打包插件，然后在这个文件夹下创建word . js的文件book。
写插件，代码如下：
//插件暴露的一定是对象。
让世界={}
word . install=function(Vue，选项){
//console.log(我是插件，我调用的)//在main.js文件中引入注册时会调用。
//console.log(Vue) //可以接收参数Vue。
//console.log(options) //可以接收参数配置对象。
//有了Vue，我们可以在Vue上调用一系列API，比如Vue.componentVue.filter等等
Vue.directive(options.name，(element，params)={
//console . log( I DIY )//在使用页面时执行
//将接收参数元素：绑定元素；Params:这个对象的一些对象信息。
element . innerhtml=params . value . toupper case()
params中有一个参数修饰符，它保存修饰符。使用自定义指令时添加的修饰符将存储在修饰符中。
})
}
导出默认世界
Vue.js的插件应该公开一个install方法。这个方法的第一个参数是Vue构造函数，第二个参数是可选的option对象。
在页面我们就可以使用了：
模板
div id=应用程序
img alt=Vue logo src=。/assets/logo.png /
br /
p v-world=text/p
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
文本：“世界”
}
}
}
/脚本
风格
#app {
字体系列：Avenir，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
此时，页面呈现了世界。
更多细节请参考Vue的文档：https://cn.vuejs.org/v2/guide/custom-directive.html
总结
以上是在Vue中处理图片懒加载的方法。处理图片懒加载的方法有很多，但核心是一样的。实现图片懒加载的简单原理就是监控图片的变化，用变化后的图片替换显示的默认图片。
希望给大家一个参考，支持我们。
