codecamp

Vant Lazyload 图片懒加载

引入

Lazyload​ 是 Vue 指令,使用前需要对指令进行注册

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true
});

代码演示

基础用法

将​v-lazy​指令的值设置为你需要懒加载的图片

<img v-for = "img in imageList" v-lazy = "img" >
export default {
  data() {
    return {
      imageList: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    };
  }
}

背景图懒加载

和图片懒加载不同,背景图懒加载需要使用 ​v-lazy: background-image​,值设置为背景图片的地址,需要注意的是必须声明容器高度。

<div v-for = "img in imageList" v-lazy:background-image = "img" />

组件懒加载

将需要懒加载的组件放在 ​lazy-component ​标签中,即可实现组件懒加载。

// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true
});
<lazy-component>
  <img v-for = "img in imageList" v-lazy = "img" >
</lazy-component>

API

Options

参数说明类型默认值
loading加载时的图片string-
error错误时的图片string-
preload预加载高度的比例string-
attempt尝试次数number3
listenEvents监听的事件string[]scroll
adapter适配器object-
filter图片 URL 过滤object-
lazyComponent是否能懒加载模块booleanfalse
更多内容请参照:vue-lazyload 官方文档


Vant ImagePreview 图片预览
Vant List 列表
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }