分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例
更新時(shí)間：2017年03月13日 15:52:27 作者：冰星寒水
本篇文章主要介紹了分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例。非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
這個(gè)插件未壓縮版本只有7.62kb，很精簡(jiǎn)，支持img標(biāo)簽和background-img資源的lazyload。支持vue.js 1.0 和vue.js 2.0
安轉(zhuǎn)
$ 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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)
最近工作中實(shí)現(xiàn)的一個(gè)效果不錯(cuò),分享給大家,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue一次性簡(jiǎn)潔明了引入所有公共組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
這篇文章主要介紹了vue中使用mxgraph的方法實(shí)例代碼詳解,需要的朋友可以參考下2019-05-05
Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
VScode更新后安裝vetur仍無(wú)法格式化vue文件的解決
這篇文章主要介紹了VScode更新后安裝vetur仍無(wú)法格式化vue文件的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-cli是vue官方出品的快速構(gòu)建單頁(yè)應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router，這篇文章主要介紹了Vue?cli及Vue?router詳解,需要的朋友可以參考下2022-08-08
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue2.x 父組件監(jiān)聽(tīng)子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽(tīng)子組件事件并傳回信息的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家介紹了TDesign在vitest的實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07