Mint UI 圖片懶加載指令-Lazy Load

圖片懶加載指令。

引入

import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);

例子

為? img? 元素添加 ?v-lazy? 指令，指令的值為圖片的地址。同時(shí)需要設(shè)置圖片在加載時(shí)的樣式。

<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>

image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

若列表不在 ?window ?上滾動(dòng)，則需要將被滾動(dòng)元素的 ?id? 屬性以修飾符的形式傳遞給? v-lazy?指令

<div id="container">
  <ul>
    <li v-for="item in list">
      <img v-lazy.container="item">
    </li>
  </ul>
</div>