您好,登錄后才能下訂單哦!
這個(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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。