有关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. SpringBoot2.0集成FastDFS

    SpringBoot2.0集成FastDFS 前两篇整体上介绍了通过 Nginx 和 FastDFS 的整合来实现文件服务器.但是,在实际开发中对图片或文件的操作都是通过应用程序来完成的,因此,本篇将 ...

  2. 远程FTP下载文件

    现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...

  3. linux内核剖析(十)进程间通信之-信号量semaphore

    信号量 什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程)所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明它被占用,测试的线 ...

  4. Mathematica绘制曲面交线方法

    新引入的SliceContourPlot不错 SliceContourPlot3D[y, (1.7 x^2 + y/3 + 0.6 z^2) (1.7 (x - 2)^2 + y/3 + 0.6 z^ ...

  5. 带你Python入门,踏进人工智能领域

    1.Python能做什么? 不知大家 没有看<中国好声音>呢?有位选择就是利用AI改编了一首周杰伦的歌<止战之殇>. Python适合做人工智能AI吗? 很明确的告诉你,可以! ...

  6. ubuntu代理设置

    很多时候,服务器都没有连接外部互联网的条件,需要利用代理服务器才能够访问外网资源进行软件包的升级: ubuntu修改apt-get的代理可以使用代理进行安装包的升级: ubuntu@ubuntu:~$ ...

  7. seaJS简介和完整实例

    什么是 seaJS ? 和requireJS相似的,seaJS 也是用JavaScript编写的JS框架,主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作,可简单理解为 ...

  8. Super expression must either be null or a function, not undefined

    按照之前买的用JavaScript开发移动应用的例子来编写的,然后报了这个错.我的头部声明是这样的 var React = require('react-native'); var { Text, V ...

  9. EL表达式具体解释

    在 JSP 页面中,使用标签库取代传统的 Java 片段语言来实现页面的显示逻辑已经不是新技术了,然而.由自己定义标签非常easy造成反复定义和非标准的实现.鉴于此.出现了 JSTL ( JSP St ...

  10. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...