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

ゞ浴缸里的玫瑰 2022-04-15 01:15 3126阅读 0赞

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

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

二、微信小程序的第一种情况是： 现在有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 ,显示后面的页面内容，

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，3126人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——图片的加载与获取手机内部的图片

关于将手机里的图片放在上传到小程序，在小程序里这种方法并不陌生，甚至大多数小程序都附带有这种功能，那么这种功能是怎么实现的呢，一起来看看吧！！！

偏执的太偏执、/ 2024年04月24日 14:43/ 0 赞/ 7 阅读

相关在微信小程序里实现图片预加载组件

网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单，通常的做法是在 JS 中使用 `Image` 对象即可，代码大致如下 <table style

叁歲伎倆/ 2022年05月20日 02:21/ 0 赞/ 262 阅读

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

一、常规的页面处理的时候，我们可以使用多种方式处理图片预加载，但是这些方法在小程序中似乎就没有那么好用了，所以，我们可以使用图片的回调函数进行图片的预加载处理

ゞ浴缸里的玫瑰/ 2022年04月15日 01:15/ 0 赞/ 3127 阅读

相关微信小程序：点击图片预览

做微信小程序的时候使用的图片大小不尽相同，为了让使用者能够浏览原图，就需要给图片添加点击预览的功能，下面我详细介绍一下实现步骤，首先介绍微信小程序文档中的使用教程： ![

妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 585 阅读

相关解决微信小程序图片延迟加载（四种方法）

实现延迟加载的方法 1：通过监听滚动条滑动事件，判断元素距离页面顶部的距离是否小于等于页面的可视高度 Page({ data: { re

红太狼/ 2021年11月29日 04:14/ 0 赞/ 1681 阅读

相关微信小程序选择图片和预览图片

选择图片视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用

素颜马尾好姑娘i/ 2021年09月17日 00:28/ 0 赞/ 584 阅读

相关给微信小程序页面加载背景图片解决方案

我们知道，在PC端，想在一个页面插入一张背景图，只需要如下属性即可。 background-image: url("../images/photo.png"); 在

我就是我/ 2021年09月15日 19:22/ 0 赞/ 934 阅读

相关微信小程序wx.previewImage预览图片

一.小知识 ![20170525131248116][] 二.例子 1.wxml <view class="container"> <view wx:fo

ゞ浴缸里的玫瑰/ 2021年09月12日 07:30/ 0 赞/ 563 阅读

相关微信小程序上拉加载

框架->框架接口->页面->page 上拉加载函数(局部刷新): onReachBottom:function(event){xxx}

落日映苍穹つ/ 2021年07月24日 21:36/ 0 赞/ 634 阅读

相关小程序实现图片模糊预加载

小程序实现图片模糊预加载导语最近在做的小程序项目设计大量图片的展示，小程序已经提供了图片的懒加载功能，但是由于图片本身比较大加上要展示的图片比较多，如何以一个比较友好...

红太狼/ 2020年06月18日 16:26/ 0 赞/ 720 阅读