南磨房网站建设公司,wordpress插件上传,ppt成品网站,网站招工费怎么做会计分录网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单#xff0c;通常的做法是在 JS 中使用 Image 对象即可#xff0c;代码大致如下var image new Image()
image.onload function() {console.log(图片加载完成)
}
image.src//misc.360buyimg.com/lib…网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单通常的做法是在 JS 中使用 Image 对象即可代码大致如下var image new Image()
image.onload function() {console.log(图片加载完成)
}
image.src//misc.360buyimg.com/lib/img/e/logo-201305.png然而在微信小程序以下简称小程序里要实现图片的预加载要更麻烦一些因为小程序里并没有提供类似 Image 这样的 JS 对象。。小程序必知必会在进入正题前需要了解以下小程序相关的知识当然最好还是完整的学习一下官方文档小程序框架的核心是一个响应的数据绑定系统整个系统分为视图层和逻辑层两块视图层即页面模板后缀为 .wxml 的文件逻辑层即页面 JS 文件小程序的页面模板由一系列的基础组件组合而成如 view、text、button 等页面内容的更新基于数据的单向绑定来进行通过 JS 调用 Page 对象的 setData 方法来更新模板中绑定的数据视图层到逻辑层的通信是通过事件完成的在组件中声明事件的回调JS 端可监听到界面交互的发生、组件状态的变化等在 WXML 文件中可通过 template 进行模板的复用若 template 是在不同文件里定义的需要先通过 import 语句进行引入这里有个官方的简单例子可以用来帮助理解!-- 模板文件 foo.wxml --
view Hello {{name}}! /view
button bindtapchangeName Click me! /button//脚本文件 foo.js
Page({data: {name: WeChat},changeName: function(e) {this.setData({name: MINA})}
})运行这个页面会看到一行 Hello WeChat! 的文字及一个按钮点击按钮后文字会变成 Hello MINA!在小程序中加载图片小程序提供一个 image 组件类似于 HTML 中的 img 标签可以设置 src 及加载成功或失败的回调使用起来很简单!-- 模板文件 bar.wxml --
image src//misc.360buyimg.com/lib/img/e/logo-201305.png bindloadimageOnLoad binderrorimageOnLoadError ///脚本文件 bar.js
Page({imageOnLoad(ev) {console.log(图片加载成功width: ${ev.detail.width}; height: ${ev.detail.height})},imageOnLoadError() {console.log(图片加载失败)}
})运行以上代码顺利的话页面上会显示出一张图片同时控制台会打印出带图片宽高的日志信息将功能抽离成公用组件接下来我们考虑实现这么一个功能在页面上载入一张尺寸和 K 数都很大的图片由于图片很大下载需要一定的时间而在这段时间内用户看到的是空白或是不完整的图片体验显然不好。一种常用的优化手段是先加载一张缩略图该缩略图通过样式设置为和原图一样的宽高这样用户首先能很快速地看到一张模糊的图片此时再去对原图做预加载加载完成之后对缩略图进行替换因为此时图片已经下载过了所以界面上能无缝地切换为原图显示效果如下我们团队承接前端开发、小程序开发欢迎外包合作。如有需要敬请咨询微信/QQ865500888运行以上代码顺利的话页面上会显示出一张图片同时控制台会打印出带图片宽高的日志信息将功能抽离成公用组件接下来我们考虑实现这么一个功能在页面上载入一张尺寸和 K 数都很大的图片由于图片很大下载需要一定的时间而在这段时间内用户看到的是空白或是不完整的图片体验显然不好。一种常用的优化手段是先加载一张缩略图该缩略图通过样式设置为和原图一样的宽高这样用户首先能很快速地看到一张模糊的图片此时再去对原图做预加载加载完成之后对缩略图进行替换因为此时图片已经下载过了所以界面上能无缝地切换为原图显示效果如下可以看出由于小程序里无法动态地插入模板结构所以相对于普通网页端的组件调用这里多出了在 WXML 文件中引入及使用模板这个步骤而其他部分对于调用方即Demo 页面来说则是相似的下面是完整的 Demo 页面的代码!-- demo.wxml --view classimg_wrapimage wx:if{{ imgUrl }} src{{ imgUrl }} /
/viewbutton bindtaploadImageClick To Load Image/buttonview classmsg{{ msg }}/view!-- 引入图片预加载组件 --
import src../../img-loader/img-loader.wxml/
template isimg-loader data{{ imgLoadList }}/template// ------ demo.js ------//引入图片预加载组件
const ImgLoader require(../../img-loader/img-loader.js)//缩略图 80x50 3KB
const imgUrlThumbnail http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg//原图 3200x2000 1.6MB
const imgUrlOriginal http://storage.360buyimg.com/mtd/home/lion1483624894660.jpgPage({data: {msg: ,imgUrl: },onLoad() {//初始化图片预加载组件this.imgLoader new ImgLoader(this)},loadImage() {//加载缩略图this.setData({msg: 大图正拼命加载..,imgUrl: imgUrlThumbnail})//同时对原图进行预加载加载成功后再替换this.imgLoader.load(imgUrlOriginal, (err, data) {console.log(图片加载完成, err, data.src)this.setData({ msg: 大图加载完成~ })if (!err)this.setData({ imgUrl: data.src })})}
})如果把图片加载完成的回调统一指定成 Page 对象中的方法则可以很方便地处理多张图片的加载这里也写了个例子效果如下我们团队承接前端开发、小程序开发欢迎外包合作。如有需要敬请咨询微信/QQ865500888总的来说调用起来还算方便吧img-loader 的组件代码略多这里就不贴出来啦Have Fun~
