yangakw yangakw

微信小程序图片预加载

in 记录read (301) 文章转载请注明来源!

预加载在web端实现师是很方便的。

可以通过 new Image实现

var image = new Image()
image.onload = function() {
console.log('图片加载完成')
}
image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'

为什么要做图片预加载

如果图片很大,那么加载起来就会一部分一部分显示,如果做出预加载,可以在Image的onload事件触发之前放一张小图片,然后等图片全部加载后进行src地址替换。

例如

<img id='demo' src = 'http://ofc9whdve.bkt.clouddn.com/2017/01/09/Fgrn3rg3NtXq7p10zWrAVSiBrHTI369.jpg?imageView2/2/w/200/h/100/interlace/0/q/100' data-src='http://ofc9whdve.bkt.clouddn.com/2017/01/09/Fgrn3rg3NtXq7p10zWrAVSiBrHTI369.jpg'>
<div id='msg'></div>
<script>
    var image = new Image();
    var image_url = $("#demo").data("src");
    image.onload=function(){
        $("#msg").html("大图加载完成");
        $("#demo").attr("src",image_url );
    }
    image.src=image_url ;
</script>

微信小程序实现图片预加载的原理

    
<!-- 模板文件 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('图片加载失败')
    }
})

测试图片

凹凸社区做的微信小程序图片预加载组件地址 https://github.com/o2team/wxapp-img-loader

转自 凹凸实验室(https://aotu.io/notes/2017/01/06/wxapp-img-loader/)

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

发表新评论
博客已运行
© 2017 yangakw
PREVIOUS NEXT
雷姆
拉姆