|
深夜,看了下论坛,看到关于img标签的问题。通常,各个浏览器对img标签的加载有不同,尤其是当使用一个img.src="你想要的图片url"时。先将论坛的代码拖过来
<div class="aui-substance-option" value='{{=it.isPraised}}'>
<img class="aui-substance-option-icon" src="../image/praise_0.png">
<span style="color:#7f7f7f;">赞</span>
</div>
通过div中的onclick事件调用praise方法,实现点赞功能
其中$img是获取到的: <img class="aui-substance-option-icon" src="../image/praise_0.png">
代码如下
ajaxRequest(setPraiseUrl+params, 'POST', "", function (ret, err) {
if (ret) {
if(ret.result == 1) {
var isPraised = obj.value;
if("0" == isPraised){
$img.src = "../image/praise_1.png";
obj.value = "1";
} else {
$img.src = "../image/praise_0.png";
obj.value = "0";
}
}
}
api.hideProgress();
});
然后在代码中 通过$img.src进行图片切换,发现有不短的延迟,点击发送请求以后,加载层都消失了一会儿(api.hideProgress();)才切换图片
弄了半天,明白代码意图和实际执行结果。其实,这个是各个浏览器对img标签中图片加载的延时造成的。每个图片文件有大小,从磁盘读取到经过内存渲染是有时间过程的,尤其是图片非常大的时候。为了实现异步操作,图片渲染可以认为是另一个线程再进行操作,而你想干的事情又是一个线程在操作,2个线程中间存在时差,这个时差与图片大小相关,因此,期望的顺序执行不会发生,而变成了先蓝色代码块,而红色代码块后执行。解决办法,对于所有img都有一个onload函数,这个多数浏览器都支持,在img.onload=function(){ 这里 },执行你的后一步动作解决即可。img.onload表明图片加载完毕执行的事件。
|
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|