vue-lazyload,vue lazyload

　　本文通过示例代码介绍Vuelazyload图片懒加载的相关知识，通过导入配置等操作src/main.jswenj。代码简单易懂，对大家的学习或工作都有一定的参考价值。请有需要的朋友参考。

　　文件：https://github.com/hilongjw/vue-lazyload

1.安装

　　cnpm i vue-lazyload -S

　　或者

　　npm i vue-lazyload -S

2.实例

　　导入src/main.js等操作

　　从“vue”导入Vue

　　从导入应用程序。/App

　　从导入路由器。/路由器

　　//[1]导入延迟加载

　　从“vue-lazyload”导入VueLazyload

　　Vue.use (vuelazyload)//[1]懒惰加载和使用(并且下面的句子是2中1)

　　//[1]如果你懒的加载使用，而且是全局配置的，使用的时候不需要配置错图(2选1)。

　　//Vue.use(VueLazyload，{

　　//preLoad: 1.3，//加载时间

　　//错误： dist/error.png ，//图片显示这张图片不正确。

　　//加载： dist/loading.gif ，//加载过程显示此图。

　　//尝试次数：1 //加载的默认张数

　　//})

　　Vue.config.productionTip=false

　　/* eslint-禁用no-new */

　　新Vue({

　　埃尔： #app ，

　　路由器，

　　模板：“App/”，

　　组件：{

　　应用

　　}

　　})

　　使用延迟加载src/components/lazy.vue。

　　[1]定义图像错误显示等。(介绍图片，如果是js的话。要求进来)

　　[2]使用惰性加载编写v-lazy=xxx

　　模板

　　差异

　　！-[2]使用惰性加载编写v-lazy= XXX --

　　img v-lazy=imgUrl/

　　img v-lazy=imgObj /

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名字：“懒”，

　　data(){

　　返回{

　　//[1]定义画面错误显示等。(介绍一下图片，如果是在js的话。要求进来)

　　imgObj: {

　　预加载：1.3，//加载时间

　　src: 3358 www.wwtliu.com/sxtstu/blueberry pai/index img/banner 1 . jpg ，//实景图片

　　错误：要求(./assets/error.jpg )，//如果此图显示错误

　　正在加载：需要(./assets/loading . jpg )，//加载过程如图。

　　尝试次数：1，//加载的默认张数

　　},

　　imgurl: http://www.wwtliu.com/sxtstu/blueberry pai/index img/banner 2 . jpg //只加一个，就是实拍图。

　　}

　　}

　　}

　　/脚本

　　款式/风格

　　效果：图片地址错误时加载的图片。加载过程显示加载过程画面。

　　这篇关于Vue-lazyload图片懒加载的文章到此为止。关于Vue-lazyload图片的延迟加载的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

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