vue3 图片懒加载,懒加载 vue

vue3 图片懒加载,懒加载 vue,vue里面如何使用图片的懒加载

本文主要介绍了如何在vue中使用图片的懒加载，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

前言

什么是懒加载

通俗地说，在需要镜像的时候进行懒加载的好处就是减轻了服务器的压力。当网络较慢时，您可以提前在此图像中添加一个占位符图像，以改善用户体验。

一、安装相关的包

安装延迟加载所需的包。

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对象。

在页面我们就可以使用了：

模板