网页中的图片预加载
图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 web 页面中实现图片的预加载其实很简单,通常的做法是在 js 中使用 image 对象即可,代码大致如下
var image = new image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'
下面推荐几篇网页中实现图片预加载的文章:
1、
然而在微信小程序(以下简称小程序)里要实现图片的预加载要更麻烦一些,因为小程序里并没有提供类似 image 这样的 js 对象。。
小程序必知必会
在进入正题前,需要了解以下小程序相关的知识(当然最好还是完整的学习一下官方文档):
这里有个官方的简单例子可以用来帮助理解
<!-- 模板文件 foo.wxml --> <view> hello {{name}}! </view> <button bindtap="changename"> 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="http://misc.360buyimg.com/lib/img/e/logo-201305.png" bindload="imageonload" binderror="imageonloaderror" />
//脚本文件 bar.js page({ imageonload(ev) { console.log(`图片加载成功,width: ${ev.detail.width}; height: ${ev.detail.height}`) }, imageonloaderror() { console.log('图片加载失败') } })
运行以上代码,顺利的话页面上会显示出一张图片,同时控制台会打印出带图片宽高的日志信息
将功能抽离成公用组件
接下来我们考虑实现这么一个功能,在页面上载入一张尺寸和 k 数都很大的图片,由于图片很大,下载需要一定的时间,而在这段时间内,用户看到的是空白或是不完整的图片,体验显然不好。
一种常用的优化手段是先加载一张缩略图,该缩略图通过样式设置为和原图一样的宽高,这样用户首先能很快速地看到一张模糊的图片,此时再去对原图做预加载,加载完成之后对缩略图进行替换,因为此时图片已经下载过了,所以界面上能无缝地切换为原图显示,效果如下:
单张图片预加载
完成这个优化操作的关键就在于需要一个公共的图片预加载组件的支持,接下来我们分步骤来看看如何实现
可以看出,由于小程序里无法动态地插入模板结构,所以相对于普通网页端的组件调用,这里多出了在 wxml 文件中引入及使用模板这个步骤,而其他部分对于调用方(即demo 页面)来说则是相似的,下面是完整的 demo 页面的代码
<!-- demo.wxml --> <view class="img_wrap"> <image wx:if="{{ imgurl }}" src="{{ imgurl }}" /> </view> <button bindtap="loadimage">click to load image</button> <view class="msg">{{ msg }}</view> <!-- 引入图片预加载组件 --> <import src="../../img-loader/img-loader.wxml"/> <template is="img-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.jpg' page({ 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 对象中的方法,则可以很方便地处理多张图片的加载,这里也写了个例子,效果如下:
多张图片预加载
总的来说调用起来还算方便吧,img-loader 的组件代码略多这里就不贴出来啦,有兴趣的同学可以前往 github 项目页面 查看,目前此组件已应用在京东购物小程序版中。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
如对本文有疑问, 点击进行留言回复!!
【第138期】 游戏策划:应聘前HR要求把游戏玩到30级,怎么玩?
网友评论