首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图片懒加载指令 | Lazy load

图片懒加载指令。

引入

代码语言:javascript
复制
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);

例子

img 元素添加 v-lazy 指令,指令的值为图片的地址。同时需要设置图片在加载时的样式。

代码语言:javascript
复制
<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>
代码语言:javascript
复制
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

若列表不在 window 上滚动,则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令

代码语言:javascript
复制
<div id="container">
  <ul>
    <li v-for="item in list">
      <img v-lazy.container="item">
    </li>
  </ul>
</div>

扫码关注腾讯云开发者

领取腾讯云代金券