apicloud apicloud

注册
查看: 3126|回复: 1

[APP开发技巧] html中img.src的延迟问题

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

[APP开发技巧] html中img.src的延迟问题

3126 1 | 发表于 2015-7-30 00:41:41 |阅读模式 | |
深夜,看了下论坛,看到关于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表明图片加载完毕执行的事件。




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
13
帖子:
296
云币:
53
发表于 2015-7-30 08:40:28 |
学习一下
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表