有关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. mac下host配置 + mac修改了环境变量却不生效:zsh: command not found: xxx

    https://blog.csdn.net/hlllmr1314/article/details/52228672 在/etc/profile中配置了go语言环境变量: export GOROOT=/ ...

  2. 数组去重Demo引出的思考

    package com.pers.Stream; import java.util.*; import java.util.stream.Collectors; import java.util.st ...

  3. glog日志库使用笔记

    日志能方便地诊断程序原因.统计程序运行数据,是大型软件系统必不可少的组件之一.glog 是google的开源日志系统,相比较log4系列的日志系统,它更加轻巧灵活. 在Github上下载glog,解压 ...

  4. c# 非调试状态下面执行

    #if !DEBUG                View("ErrorSimple").ExecuteResult(ControllerContext);#endif

  5. RobotFrameWork系列免费课程-开课了~

    1. 背景介绍 有一段时间没有发表过文章了,一方面除了自己确实变得懒惰外,另一方面也确实有其它事情,无法抽出闲余时间来坚持写下去. 之前在博客园中,发表了关于<公开课一:Robot FrameW ...

  6. mac 10.12 sierra 机械键盘+ratm可编程鼠标记录

      系统:mac 10.12 sierra 键盘:机械键盘 鼠标:mad catz ratm 在mac 10.11/10.12 之前: 机械键盘:一般的机械键盘在mac上使用, alt 和 win 键 ...

  7. MacOS下保护浏览器主页和默认搜索

    Windows流氓软件已被中国人玩烂了, 终于连Mac也被沦陷. 视频演示地址: http://v.youku.com/v_show/id_XMTMwMTk4MzQ0MA==.html

  8. CentOS 7.4nginx配置SSL

    一.在/etc/nginx/conf.d目录下创建虚拟主机配置文件 server { listen 80; server_name www.xx.com xx.com; return 301 http ...

  9. adb获得安卓系统版本及截屏

    [时间:2017-09] [状态:Open] [关键词:adb, android,系统版本,截屏,screencap] 本文主要是我遇到的android命令行用法的一个简单总结 系统版本 获取系统版本 ...

  10. C# 参数签名字符串按 ASCII码排序,注意其中的坑

    参数签名中通常是按键值对中键名称的ASCII按从小到大的顺序排序后进行hash为签名字符串.不要直接使用 SortedDictionary<string, string> 有坑的,他是按数 ...