分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件

這個(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

github地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末爽待,一起剝皮案震驚了整個(gè)濱河市愈捅,隨后出現(xiàn)的幾起案子遏考,更是在濱河造成了極大的恐慌,老刑警劉巖蓝谨,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诈皿,死亡現(xiàn)場(chǎng)離奇詭異林束,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)稽亏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)缕题,“玉大人截歉,你說(shuō)我怎么就攤上這事⊙塘悖” “怎么了瘪松?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)锨阿。 經(jīng)常有香客問(wèn)我宵睦,道長(zhǎng),這世上最難降的妖魔是什么墅诡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任壳嚎,我火速辦了婚禮,結(jié)果婚禮上末早,老公的妹妹穿的比我還像新娘烟馅。我一直安慰自己,他們只是感情好然磷,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布郑趁。 她就那樣靜靜地躺著,像睡著了一般姿搜。 火紅的嫁衣襯著肌膚如雪寡润。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天舅柜,我揣著相機(jī)與錄音梭纹,去河邊找鬼。 笑死业踢,一個(gè)胖子當(dāng)著我的面吹牛栗柒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播知举,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼瞬沦,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了雇锡?” 一聲冷哼從身側(cè)響起逛钻,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锰提,沒(méi)想到半個(gè)月后曙痘,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體芳悲,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年边坤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了名扛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡茧痒,死狀恐怖肮韧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旺订,我是刑警寧澤弄企,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站区拳,受9級(jí)特大地震影響拘领,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜樱调,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一约素、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧本涕,春花似錦业汰、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至晦闰,卻和暖如春放祟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呻右。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工跪妥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人声滥。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓眉撵,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親落塑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子纽疟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容