vue 实现预加载
2017-11-06 16:39:00 weixin_34067980 阅读数 241

要做预加载,首先先安装vue-lazyload 插件
指令是 cnpm i vue-lazyload --save
安装完毕之后,在main.js文件里面导入插件

import VueLazyload from 'vue-lazyload'//导入插件
//使用vue-lazyload
Vue.use(VueLazyload, {
  //预加载图片的路径写对
  loading: 'static/loading-svg/loading-balls.svg',
//这个路径可以是默认的加载错误的dist/error.jpg 或者是loading的图片,也可以是自定义的图片
  attempt: 3 // default 1
//还有以下配置项
})

这些写了之后,文件的加载指令就变了:就不是:src=""
就变成了<img v-lazy="'static/'+item.prodcutImg" alt=""> 路径还是后台反馈的数据,只变化 指令就OK了

5817369-f4641f865d32da09.png
lozyload的配置项

可以直接参考官网的说明
https://www.npmjs.com/package/vue-lazyload

2018-06-22 10:31:23 Mh_ui 阅读数 1431


2019-05-17 20:08:18 Tom__cy 阅读数 395

看这个时需求先看看:https://blog.csdn.net/Tom__cy/article/details/90234108 -----能够加快理解

个人总结:https://github.com/Tom-cy/Immortals 欢迎Star 持续更新

##Vue中的预加载-------------------------------------


 
 

解析代码: HTML:  img 标签为背景图, loading 图, P 标签为显示的百分比, 
	
	JS: imgArr 为 所有的图片信息 , 
			imgCount: 为动态的显示百分比

Vue的生命周期: mounted ,在页面加载完成时执行 loading 函数,

	在methods :中执行方法:   先将data 中的数据写到methods 中( 本人比较懒, 不想调用this ) 
		然后对所有的imgArr 进行遍历 ,  最后  image.onload 方法 , 代码在下面

在这里插入图片描述

这里面有个小坑, 就是图片动态加载时, 需求添加require , 用require 标签包裹下 ,   下面是图片   ,::::: 和img 图片路径

在这里插入图片描述

##Vue 中的懒加载----------------------------------------------------

 
. 安装插件:
npm install vue-lazyload --save-dev


使用插件
main.js 中使用:

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',                        //报错需要的图片
    loading:'./static/loading.png'					// 替换需要的图片
})
 
图片替换:

 vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

<img class="item-pic" v-lazy="newItem.picUrl"/>
 
 
2019-01-02 16:39:00 weixin_34212762 阅读数 274

简单解释

        懒加载顾名思义,很懒,所以用到时才开始加载,不用不加载。
        预加载,预,提前的意思。没用到时就先加载完等着。

应用范围

        图片的预加载与懒加载主要目的就是减少用户等待的时间提高用户体验。对于多图页面,比如相册展示。一次性加载过多图片会使用户进入页面速度变慢。这时我们就可以使用懒加载假装自己页面很快。而有些图片不多的页面,我们在用户进入这个页面前需要提前把图片加载完成,来保证其他样式功能正常,这时我们使用预加载提升稳定性。

原理

        懒加载: 初始置src属性为空,或者全部为“加载中”提示图的路径。监听页面滚动当图片标签即将进入可视区域时给src重新赋值。此时图片开始加载。

        预加载:在进入页面前通过js加载需要的图片到浏览器缓存,浏览器刷新前,同样的图片路径请求会被跳过,直接使用缓存中的文件。

代码详解

        下面主要针对vue做代码详解,也是对上面理论的应用举例。
        懒加载:如下图,红框中是通过的isLoadStart状态控制图片加载时机,当isLoadStart为true时开始加载图片。

15214039-f48ee30a239769cf.png
图1.vue标签

        如图2,就是控制isLoadStart的方法,通过以下方法我们可以开启图片加载。
        图中 toTop是图片举例页面全内容顶部的距离,clientHeight是可视区域的高度,scrollTop是滚动条与页面内容顶部的距离。因此 toTop - scrollTop就是图片顶部与可视区域顶部的距离。所以当这个距离小于可视区域高度时就说明图片进入可视区域了。本次我设置提前100像素就开始加载。

15214039-b95da6b783b4a98d.png
图2.验证函数

        我们已经有了验证函数,那么我们还需要触发验证。我们可以设置事件监听,或者定时器。
        如图3我设置了滚动条滚动事件的监听,当滚动条滚动期间做验证。如果用定时器需要记得释放。

15214039-2daeaf0e0232813e.png
图3.设置监听

        预加载:之前我使用vux的scroller时发现第一次进入多长图页面无法拖动。后来调查分析是图片加载影响,因为是多长图,只限制宽度,高度自适应。所以未加载出图像时没有高度。因此我需要做个预加载。在页面跳转前,我做了如下操作。遍历目标图片集合,待加载完成onload后再跳转路由。其中count为计算加载到第几张图片。

15214039-9221d1fc0e0b2f2a.png
图4.预加载

转载到其他平台需含本文的简书链接

2019-01-02 16:39:00 weixin_34266504 阅读数 8

简单解释

        懒加载顾名思义,很懒,所以用到时才开始加载,不用不加载。
        预加载,预,提前的意思。没用到时就先加载完等着。

应用范围

        图片的预加载与懒加载主要目的就是减少用户等待的时间提高用户体验。对于多图页面,比如相册展示。一次性加载过多图片会使用户进入页面速度变慢。这时我们就可以使用懒加载假装自己页面很快。而有些图片不多的页面,我们在用户进入这个页面前需要提前把图片加载完成,来保证其他样式功能正常,这时我们使用预加载提升稳定性。

原理

        懒加载: 初始置src属性为空,或者全部为“加载中”提示图的路径。监听页面滚动当图片标签即将进入可视区域时给src重新赋值。此时图片开始加载。

        预加载:在进入页面前通过js加载需要的图片到浏览器缓存,浏览器刷新前,同样的图片路径请求会被跳过,直接使用缓存中的文件。

代码详解

        下面主要针对vue做代码详解,也是对上面理论的应用举例。
        懒加载:如下图,红框中是通过的isLoadStart状态控制图片加载时机,当isLoadStart为true时开始加载图片。

15214039-f48ee30a239769cf.png
图1.vue标签

        如图2,就是控制isLoadStart的方法,通过以下方法我们可以开启图片加载。
        图中 toTop是图片举例页面全内容顶部的距离,clientHeight是可视区域的高度,scrollTop是滚动条与页面内容顶部的距离。因此 toTop - scrollTop就是图片顶部与可视区域顶部的距离。所以当这个距离小于可视区域高度时就说明图片进入可视区域了。本次我设置提前100像素就开始加载。

15214039-b95da6b783b4a98d.png
图2.验证函数

        我们已经有了验证函数,那么我们还需要触发验证。我们可以设置事件监听,或者定时器。
        如图3我设置了滚动条滚动事件的监听,当滚动条滚动期间做验证。如果用定时器需要记得释放。

15214039-2daeaf0e0232813e.png
图3.设置监听

        预加载:之前我使用vux的scroller时发现第一次进入多长图页面无法拖动。后来调查分析是图片加载影响,因为是多长图,只限制宽度,高度自适应。所以未加载出图像时没有高度。因此我需要做个预加载。在页面跳转前,我做了如下操作。遍历目标图片集合,待加载完成onload后再跳转路由。其中count为计算加载到第几张图片。

15214039-9221d1fc0e0b2f2a.png
图4.预加载

转载到其他平台需含本文的简书链接

转载于:https://www.jianshu.com/p/48ecd9ba8d74

Vue中引入ES6 图片预加载

阅读数 122

封装一个图片懒加载方法在imagesPreLoader.js里:exportconstpreLoadImg=source=&gt;{constpr=[]constimages=[]source.forEach(url=&gt;{letp=loadImage(url)...

博文 来自: weixin_33720956

vue进行图片的预加载watch用法

阅读数 14463

watch应用场景我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听

博文 来自: hh279768876

Vue实现全部图片预加载React可参照这样的思想

阅读数 2

Vue实现图片全部预加载最近公司在做一个微信推广的H5,由于图片没有托管在CDN,所以首次打开H5页面图片加载会出现卡顿的情况,特别影响动画的效果。于是萌生了将所有图片预加载的想法,然后开始了Google的路程。。。初步实现的了预加载的效果,记录如下,react也可参照此方式图片预加载的原理实现图片的预加载,其实就是用js创建Image对象,然...

博文 来自: weixin_34323858

vue中css预加载使用sass的配置方式

阅读数 1453

1.安装sass的依赖包npminstall--save-devsass-loader//sass-loader依赖于node-sassnpminstall--save-devnode-sass2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分{test:/\.sass$/,l

博文 来自: qq_34645412

VUE:vue实现confirm

阅读数 500

&amp;amp;amp;lt;sectionclass=&amp;amp;quot;alert_box&amp;amp;quot;v-if=&amp;amp;quot;alertBoxShow&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;header&amp;amp;amp;gt;订单确认&amp;amp;amp;lt;/header&amp;amp;am

博文 来自: u011374582
没有更多推荐了,返回首页