微信小程序的图片预加载处理

一、常规的页面处理的时候，我们可以使用多种方式处理图片预加载，但是这些方法在小程序中似乎就没有

那么好用了，所以，我们可以使用图片的回调函数进行图片的预加载处理；

二、微信小程序的第一种情况是：现在有A ,B 两个页面

在B 页面中有 10 张图片，需要提前预加载处理，

那么我们可以在A页面加载完的时候提前加载B中的 10 张图片，

或者在进入 B页面中的时候，在 onload 函数中通过图片的回调函数监控图片加载的状态，

加载完之前显示一个loading，加载完之后再显示页面；

三、上面的两种情况是，一个页面有loading等待处理，一个没有loading等待处理，需要根据情况处理；

四、下面通过一张图片的预加载说明小程序中预加载的相关处理：

情景描述：先显示一张loading页面，在这段时间内加载图片，加载完成后显示正常的页面；

<view> 我是一个完整的页面

<view> 我是预加载图片显示的loading部分，加载完成后就不显示了

<view>我是loading部分</view> loading部分

<view><image src="test.jpg" onload = "imgLoad"></image></view> 预加载的图片（需要隐藏）

</view>

<view>我是需要图片预加载之后再显示的部分</view> 我是预加载之后显示的页面，上面的图片加载完成之后再显示

</view>

上面的是基本的页面结构处理；

那么如何控制loading和图片预加载之后的页面显示呢？

给图片设置 onload 事件，我们定义的这个 imgLoad 函数在图片加载完成之后才会执行，

所以，我们在这个函数里面进行处理即可；

首先显示loading页面，不显示后面要显示的页面，

然后加载图片，在图片的onload 事件中增加处理，隐藏 loading ,显示后面的页面内容，

一旦这图片预加载完成，就会触发这个函数的处理，达到我们需要的效果；

上面只是单张图片的预加载处理，有的时候我们需要加载一个帧动画，那图片太多了，

所以处理的原理都是这样，处理的方式可能略有不同，后续补充。。。

微信小程序的图片预加载处理相关推荐

微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...
小程序实现图片预加载（图片延迟加载）
这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持pc和手机站,在开发者工具中测试的时候,图片都是瞬间加载,因此感觉不出什么,但是真机预览的时候,特别是4G情况下,会 ...
微信小程序分包和预加载分包
前言略分包配置方法:app.json 文件 {"pages": ["pages/index/index",...],"subpackages&q ...
微信小程序之图片懒加载
数据都是死的,复制即可查看效果实现原理: 通过onPageScroll() 方法返回的e.scrollTop值与手机窗口宽高进行计算,较完美的解决了等高或均高图片序列的图片懒加载. 关于图片高度:图 ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...

微信小程序的图片预加载处理

微信小程序的图片预加载处理相关推荐

最新文章

热门文章