请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
89
帖子
0
勋章
1万+
Y币

html中img.src的延迟问题

[复制链接]
发表于 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表明图片加载完毕执行的事件。




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

X
13
帖子
0
勋章
67
Y币
学习一下
您需要登录后才可以回帖 登录

本版积分规则