本文目录

Vue.js 图片懒加载

🌙
手机阅读
本文目录结构

vue 做手机项目的时候,懒加载是非常常用的;

效果是默认不加载图片,先用一个占位符图来代替,等使用图片的时再进行加载(比如滚动到图片的时候),如果真正的图片请求出错了,用默认的出错图片来进行占位;

使用的是:https://github.com/hilongjw/vue-lazyload#requirements

这个 vue-lazyload 的用法还是很简单的,我用的是下这个版本(当前最新)

"vue-lazyload":"^1.0.5",s

在 main.js 里进行引入和使用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/img/dou_dou.jpg'),
  loading: require('@/assets/img/dou_dou.jpg'),
  attempt: 1
})

上面做里基础配置;这样就可以全局使用的里;

比如我的列表图片是通过设置区域背景的方式,

<div class="cover"
     style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
     v-lazy:background-image="item.target.cover_url"
     v-if="item.target.cover_url"
>
  <div style="padding-top: 100%"></div>
</div>

这样就 OK 了。核心是加

v-lazy

具体看它的 readme 介绍

<script>
export default {
  data () {
    return {
      imgObj: {
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      },
      imgUrl: 'http://xx.com/logo.png' // String
    }
  }
}
</script>

<template>
  <div ref="container">
     <img v-lazy="imgUrl"/>
     <div v-lazy:background-image="imgUrl"></div>

     <!-- with customer error and loading -->
     <img v-lazy="imgObj"/>
     <div v-lazy:background-image="imgObj"></div>

     <!-- Customer scrollable element -->
     <img v-lazy.container ="imgUrl"/>
     <div v-lazy:background-image.container="img"></div>

    <!-- srcset -->
    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
  </div>
</template>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了