vue3 图片懒加载,懒加载 vue

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

本文主要介绍了如何在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中处理图片懒加载的方法。处理图片懒加载的方法有很多,但核心是一样的。实现图片懒加载的简单原理就是监控图片的变化,用变化后的图片替换显示的默认图片。

希望给大家一个参考,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: