快捷導(dǎo)航

分享一個精簡的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

安轉(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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue

相關(guān)文章

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