分享一個(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)文章

Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能
這篇文章主要介紹了Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-07-07
vue中$refs的三種用法解讀
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對(duì)象時(shí),保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下
2025-01-01
為vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法
這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
Vue.js簡(jiǎn)易安裝和快速入門(mén)（第二課）
這篇文章主要為大家詳細(xì)介紹了Vue.js簡(jiǎn)易安裝和快速入門(mén)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
在Vue中使用Echarts可視化庫(kù)的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫(kù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue項(xiàng)目中使用Base64
在vue項(xiàng)目中有時(shí)會(huì)使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來(lái),對(duì)vue使用Base64相關(guān)知識(shí)感興趣的朋友一起看看吧
2024-02-02
ant-design-vue 快速避坑指南(推薦)
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫(kù)，它其實(shí)是Ant Design的Vue實(shí)現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，很多朋友在使用過(guò)程中遇到很多問(wèn)題，今天小編就給大家分享一篇教程幫助大家快速閉坑，一起看看吧
2020-01-01
vueCli4如何配置vue.config.js文件
這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03