vue-lazyload图片延迟加载插件的实例讲解
发布时间：2020-12-17 02:35:39 所属栏目：百科 来源：网络整理
导读：1、首先在npm上下载vue-lazyload的引用包 2、然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件 3、然后我们配置vue-lazyload 4、具体配置api可以看下图 html JS css 以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编
1、首先在npm上下载vue-lazyload的引用包2、然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件3、然后我们配置vue-lazyload4、具体配置api可以看下图
html JS
export default {
data () {
return {
list: [
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb','http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',]
}
}
}
css
//图片加载中...
img[lazy=loading] {
/*width: 100px;*/
background-position:center center!important;
background: url("../../../static/images/loading.gif");
background-size:100px 100px;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img[lazy=error] {
/*width: 100px;*/
background-position:center center!important;
background: url("../../../static/images/error.png");
background-size:100px 100px;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img[lazy=loaded] {
/*width: 100px;*/
background-position:center center!important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
}
.yourclass[lazy=loaded] {
/*your style here*/
}
以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
