分享一个精简的vue.js 图片lazyload插件
2023-09-27 14:29:06 时间
这个插件未压缩版本只有7.62kb,很精简,支持img
标签和background-img
资源的lazyload
。支持vue.js 1.0 和vue.js 2.0
http://www.jianshu.com/p/443a2d7c7bd5
安转
$ npm install vue-lazyload --save
使用方法
//main.js
import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'
//use custom directive
Vue.use(VueLazyload)
// use options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
})
<!--your.vue-->
<script>
export default {
data () {
return {
list: [
'your_images_url',
'your_images_url',
// you can customer any image's placeholder while loading or load failed
{
src: 'your_images_url.png',
error: 'another-error.png',
loading: 'another-loading-spin.svg'
}
]
}
}
}
</script>
<template>
<div class="img-list">
<ul id="container">
<li v-for="img in list">
<img v-lazy="img">
</li>
</ul>
</div>
</template>
这里可以定制所有加载中和加载失败加载成功的样式,
<style>
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
},
img[lazy=loaded] {
/*your style here*/
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
},
.yourclass[lazy=loaded] {
/*your style here*/
}
</style>
API
Options
params | type | detail |
---|---|---|
preLoad | Number | proportion of pre-loading height |
error | String | error img src |
loading | String | loading img src |
attempt | Number | attempts count |
相关文章
- (尚026)Vue_案例_动态初始化显示(尚025)
- vue - 路由传递参数
- vue - webpack.dev.conf.js for CopyWebpackPlugin
- 【Vue/Js】如何判断json对象为空或undefined未定义?(已解决)
- Vue制作简易购物车
- Vue.js 使用cordova camera插件调取相机
- vue.js+koa2项目实战(六)数据库建表
- Vue - 引入集成 Tinymce 富文本编辑器(详细步骤及运行Demo),在 Vue.js 项目中使用富文本插件详细教程,附带超级详细的注释说明
- Vue.js 前端项目在常见 Web 服务器上的部署配置
- Vue-cli3 简qian易yi教程
- 【Vue】转-Vue.js经典开源项目汇总
- 基于VUE+Node.JS实现(Web)学生组队网站【100010163】
- vue实战入门后台篇九:springboot+mybatis实现网站后台-代码整合及重构优化
- vue中使用laydate.js插件
- Vue中watch的简单应用
- Vue开发实例(01)之环境搭建nodejs与运行第一个Vue项目
- Vue-全局过滤器以及进阶操作