分享一个精简的vue.js 图片lazyload插件实例
更新时间:2017年03月13日 15:52:27 作者:冰星寒水
本篇文章主要介绍了分享一个精简的vue.js 图片lazyload插件实例。非常具有实用价值,需要的朋友可以参考下。
这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0
安转
$ 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 |
demo下载地址:vue-lazyloadz_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
element-ui复杂table表格动态新增列、动态调整行以及列顺序详解
这篇文章主要给大家介绍了关于element-ui复杂table表格动态新增列、动态调整行以及列顺序的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08vue转electron项目及解决使用fs报错:Module not found: Error: Can&apo
这篇文章主要给大家介绍了关于vue转electron项目及解决使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11vue3 + async-validator实现表单验证的示例代码
表单验证可以有效的过滤不合格的数据,减少服务器的开销,并提升用户的使用体验,今天我们使用 vue3 来做一个表单验证的例子,需要的朋友跟随小编一起学习下吧2022-06-06Vue组件教程之Toast(Vue.extend 方式)详解
这篇文章主要给大家介绍了关于Vue组件教程之Toast(Vue.extend 方式)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-01-01
最新评论