vue-lazyload – 图片延迟加载实例教程

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月29日11:35:46 评论 31 views

Usage

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

Options

参数说明

preLoad

    描述:

    例子:

error

    描述:图片加载失败后,的默认图片

    例子:error: 'dist/error.png',

loading

    描述:图片加载过程中,默认显示的图片设置

    例子: loading: 'dist/loading.gif',

attempt

    描述:

    例子:

listenEvents

    描述:监听的事件,默认值 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

    例子:listenEvents: [ 'scroll' ]

adapter

    描述:

    例子:

filter

   描述:过滤图片的路径,默认{ }

    例子:

lazyComponent

    描述:

    例子:

实战例子

 在main.js文件添加:
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  // 设置默认显示的图片
  loading: require('common/image/default.png')
})
在需要用到延迟加载页面
<img width="60" height="60" v-lazy="item.imgurl">

以上就是vue-lazyload - 图片延迟加载实例教程的详细内容,更多请html教程其它相关文章!

企鹅博客
  • 本文由 发表于 2020年8月29日11:35:46
  • 转载请务必保留本文链接:https://www.qieseo.com/377141.html
图片的懒加载问题 html教程

图片的懒加载问题

我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。 我们在写网页的时候怎么解决这个问题呢?这时候就要用到我们图片懒加载的问题,这样不仅可以 解决流量问题,也提高了...
PHP的类的自动加载 php教程

PHP的类的自动加载

这篇文章介绍的内容是关于PHP的类的自动加载,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 先写一个HumanModel.php class HumanModel { public f...
Java如何实现动态加载的代码实例 java教程

Java如何实现动态加载的代码实例

这篇文章主要介绍了java 动态加载的实现代码的相关资料,Java动态加载类主要是为了不改变主程序代码,通过修改配置文件就可以操作不同的对象执行不同的功能,需要的朋友可以参考下 java 动态加载的实...
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: