vue 移动端 图片懒加载 lazy

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

安装：

npm install vue-lazyload --save-dev

main.js 引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: require('@/assets/images/Lazy.png'),//加载中图片，一定要有，不然会一直重复加载占位图
  error: require('@/assets/images/Error.jpg')  //加载失败图片
});

调用：

     <div class="icon">
            // 只要将src改为v-lazy即可
          <img class="iconImg"  v-lazy="item.picUrl" alt /> 
        </div>

还可以插背景图

<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

还有想实现像v-html语法的

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

以上是 vue 移动端 图片懒加载 lazy 的全部内容， 来源链接： utcz.com/z/376046.html

回到顶部