有关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. 阿里的Json解析包FastJson使用

    阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备如下特征: 速度最快,测试表明,fastjson具有极快的性能,超越任其他的Java Json parser ...

  2. mybatis插入一个对象后获取表中自增的主键Id并且传入到插入的的对象中,方便将对象中其他属性赋值给其他以前表主键Id作为非空字段的表

    原本的sql语句为: <insert id="xx" parameterType="com.hrt.partner.model.ShopInsert"&g ...

  3. Implementation of Message Receiver

  4. CentOS 7.4上网速度慢,修改DNS!

    修改下DNS,vi /etc/resolv.conf 原来配置: nameserver 223.5.5.5 修改为: nameserver 114.114.114.114 

  5. 阿里云oss缩略图如何产生读取 超简单 不看后悔(转)

    OSS是使用通过URL尾部的参数指定图片的缩放大小 图片路径后面拼接如下路径: ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数] ?x-oss-process ...

  6. TypeScript和JavaScript的一些小技巧记录

    项目里使用到的技巧,记录一下,会持续更新. JS的技巧完全可以使用到TS上哦. JS 向下取整 Math.floor(4.5); 简写: var num = 4.5; ~~num; num <& ...

  7. RapidJson 的使用

    rapidjson为了最大化性能,大量使用了浅拷贝,使用之前一定要了解清楚.如果采用了浅拷贝,特别要注意局部对象的使用,以防止对象已被析构了,却还在被使用. rapidjson使用注意点: 1.对不存 ...

  8. d3生成的树状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS 的加密库简介

    作为前端,数据提交到后台之前,重要的数据要进行加密一下,虽然已经有 https 等技术,但是增加一道前端的加密还是相对更安全的.虽然,前端的加密很容破解,但是有总比没有强. 尤其是涉及到用户名和密码, ...

  10. SkyWalking

    介绍 SkyWalking 创建与2015年,提供分布式追踪功能.从5.x开始,项目进化为一个完成功能的Application Performance Management系统.他被用于追踪.监控和诊 ...