插件地址:https://www.npmjs.com/package/vue-lazyload;

一、使用场景:

在项目中有很多条数的信息,且图片很多的时候,不需要一次把整个页面的图片都加载完,而是在滚动到出现在屏幕才去加载该图片的时候就可以用这个插件。

二、简单使用步骤:

1. 在项目里面 npm i vue-lazyload --save

2. 在vue-cli脚手架项目主入口 main.js中引入,并调用初始化

  

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
loading: require('_common/image/default.png'), //还没加载出来的默认展示图片
error: 'dist/error.png' // 图片出错展示的默认图片
})

3. 在组件中使用

<ul>
<li v-for="(item,index2) in group.items" :key="index2" class="list-group-item" @click="selectItem(item)">
<img class="avatar" v-lazy="item.avatar" alt="">
<span class="name">{{item.name}}</span>
</li>
</ul>

使用属性 v-lazy 后面接上图片地址就可以了。

如何结合插件 vue-lazyload 来简单实现图片懒加载?的更多相关文章

  1. 用apicloud+vue的VueLazyload实现缓存图片懒加载

    <script src="../../script/vue-lazyload.js"></script><img v-lazy="remot ...

  2. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  3. 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...

  4. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  5. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  6. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  7. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  8. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  9. vue-lazyload 的使用(vue图片懒加载)

    github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...

随机推荐

  1. android.support.design库的引用和冲突解决

    android.support.design库的引用和冲突解决 转 https://www.jianshu.com/p/2a0a2af9f2b4 最近在工程中使用到android.support.de ...

  2. Hibernate 自动更新表出错 More than one table found in namespace

    报错:Caused by: org.hibernate.tool.schema.extract.spi.SchemaExtractionException: More than one table f ...

  3. 清空Redis缓存

    Redis缓存清理   1.访问redis根目录    cd  /usr/local/redis-2.8.19 2.登录redis:redis-cli -h 127.0.0.1 -p 6379 3.查 ...

  4. LeetCode_168. Excel Sheet Column Title

    168. Excel Sheet Column Title Easy Given a positive integer, return its corresponding column title a ...

  5. 关于新小米盒子的Recovery模式如何进入

    26日下的盒子订单,经过几经波折,终于在昨天来到了我的面前,新东西到手,难免少不了一些折腾:升级系统,安装软件等.一顿折腾之后,想完全恢复到出厂设置,给盒子清一下,想进入盒子的Recovery模式,按 ...

  6. linux下无法启动webdriver问题

    linux下无法启动webdriver问题: 查看是否有足够多的webdriver进程: ps -ef | grep chromedriver kill -9 `ps -ef |grepchromed ...

  7. 第一次打开PyCharm的基本操作(附图)

    第一次打开PyCharm可能需要修改一些个性化和了解一些基本操作,有助于接下来的学习过程.(后续可能会更新) 我的版本是64位的1.3 1.换界面皮肤 默认黑色的,不喜欢黑色皮肤可以换成白色的 Fil ...

  8. redis 启动配置文件加载报错 service redis does not support chkconfig

    # chkconfig: # description:Redis is a persistent key-value database 网上资料 上面的注释的意思是,redis服务必须在运行级2,3, ...

  9. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  10. Go之接口interface(1)

    1. 什么是interface在此之前,我们遇到的都是具体的类型,比如数字类型.切片类型等等.对于这些具体的类型,我们总是能知道它是什么.可以利用它来做什么,比如对于一个数字类型,我们知道可以对其进行 ...