插件地址: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. 深度学习框架PyTorch一书的学习-第七章-生成对抗网络(GAN)

    参考:https://github.com/chenyuntc/pytorch-book/tree/v1.0/chapter7-GAN生成动漫头像 GAN解决了非监督学习中的著名问题:给定一批样本,训 ...

  2. DTC & MSDTC (待研究)

    相关学习文档: Database Systems: The Complete Book

  3. SortedMap和TreeMap有什么区别?

    SortedMap和TreeMap有什么区别   答: TreeMap的类的源码: public class TreeMap<K,V> extends AbstractMap<K,V ...

  4. spring-core-5.0.6.RELEASE-sources.jar中java源代码不全

    笔者最近在调试一段代码,进入spring-core以后,IDEA帮我反编译出源码,其中MethodProxy.java如下 // // Source code recreated from a .cl ...

  5. thymeleaf动态拼接class

    场景:站内消息,一些已读的要区别与未读的. <table class="layui-table"> <thead> <tr> <th la ...

  6. ELK之在CentOS7.5上使用rpm包安装配置ELK7版本

    一,安装环境查看 二,软件版本选用 jdk 1.8.0_171 elasticsearch 7.1.1 kibana 7.1.1 logstash 7.1.1 三,安装配置 1,安装JDK 过程不详述 ...

  7. (CVE-2017-7494)Samba远程代码执行[Linux]

    简介 此漏洞是针对开启了共享的smb服务 漏洞利用 启动msfconsole search is_known_pipename   搜索此模块 use exploit/linux/samba/is_k ...

  8. redis实战---读书笔记

    第一章 初识redis redis 是一个远程内存数据库,性能强劲,具有复制特性以及为解决问题而生的独一无二的数据模型.   1. redis 简介 redis 是一种非关系型数据库(NOSQL) r ...

  9. kibana发音 logstash发音 ElasticSearch发音 音标 翻译

    kibana [kɪbana] 剋吧那 kei ba na == 扩展 logstash [lɔɡ] [stæ:ʃ] 楼个四die吃 == ElasticSearch [ɪˈlæstɪk] [sɜːt ...

  10. 笔记-6:mysql索引

    1.索引概述 建立索引的目的:加快数据库检索的速度. mysql中索引主要分为: 普通索引:使用index或key关键字创建,其索引列值可以取空值或重复值. 唯一性索引:使用关键字UNIQUE创建,其 ...