有关Vue懒加载其实并不是想象的那么难和复杂:

首先引入

import  VueLazyLoad from 'vue-lazyload';

其次是使用

Vue.use(VueLazyLoad,{

error:require(['./assets/404.jpg']);
loading:require(['./assets/loading.jpg']);

});
这里说下他的原理比如在咱们页面中拿到20条数据但是其他的暂时没必要

请求,这是VueLazyLoad将自定义一个属性,

<img class="item-pic" v-lazy="newItem.picUrl"/>
v-lazy="newItem.picUrl",看到这个newItem.picUrl就是真实的21------n++条数据(图片的地址);
但是如果真的到了这,我们不会直接把图片展示出来,而是loading,出现一个loading的图片增加用户体验

关于Vue懒加载问题的更多相关文章

  1. vue懒加载

    vue懒加载(白屏或者加载慢的解决方法) 懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异 ...

  2. vue懒加载 && 浏览器高度

    当我们进入首页时,可能有很多条目需要显示,但是如果条目太多,我们全部将之显示出来就会造成性能的消耗,比如,我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了,所以,这时候如果使用全部加载的方 ...

  3. vue懒加载 路由 router 的编写(resolve)

    如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长.当你用require这种方式引入的时候,会将你的comp ...

  4. vue-lazyload 的vue 懒加载的使用

    vue-lazyload vue 图片懒加载的使用 下载 vue-lazyload npm i vue-lazyload -S 使用 vue-lazyload 在 src 下面的 main.js 的文 ...

  5. 使用Webpack的代码分离实现Vue懒加载(译文)

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  6. 使用Webpack的代码分离实现Vue懒加载

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  7. vue懒加载实现

  8. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  9. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

随机推荐

  1. IDEA攻略合辑

    AS使用lombok注解报错:Annotation processors must be explicitly declared now. The following dependencies on ...

  2. Linux中添加计划任务与Elasticsearch日志自动清理

    一.简述 当日志发送到ELK之后,Elasticsearch随着日志的增加,占用磁盘量会越来越大.这时候,需要我们写角本定期DELETE日志.角本写法,也很简单,只是发送HTTP的DELETE方式到: ...

  3. Visual Studio 2017 扩展

    Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号,所有的工具&插件都支持这个版本号.所以请对号入座. ReSharper  ...

  4. fiddle扩展

    扩展地址:http://www.telerik.com/fiddler/add-ons 证书选择 ios设置证书生成 (CertMaker for iOS and Android) 证书查看 (Fid ...

  5. B2B相关编码说明

    B2B Cross reference Pre-Ordering enliteB2B RosettaNet EDIFACT ANSI X12 OAGIS iDOC Price Catalogue X ...

  6. BizTalk Map 累积连接字符串

    更多内容请查看:BizTalk动手实验系列目录                             BizTalk 开发系列 BizTalk 培训/项目开发/技术支持请联系:Email:cbcye ...

  7. Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办

    Atitit 酷奇的押金危机  遇到资金链断裂作为创始人应该怎么办 遇到对方确实经营不善,资产已经还不了用户的押金怎么办?? 1. 一些重要原则 1 1.1. 二次分配原则  公平原则 1 1.2. ...

  8. crawler_exa1

    编辑中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' 网页爬虫,版本 2017-09-20 21:16 ' ...

  9. APK优化工具zipalign的详细介绍和使用

    什么是Zipalign?      Zipalign是一个android平台上整理APK文件的工具,它首次被引入是在Android 1.6版本的SDK软件开发工具包中.它能够对打包的Android应用 ...

  10. 如何使用maven优雅地管理项目版本号

    原文: https://blog.csdn.net/TeleDCOS/article/details/79853782