jQuery改变图片src值图片已成功加载，可是打印出来的src值总是上一个图片的

Question

我用jQuery从本机上选取图片并在html页面上显示。可以看出来图片的内容已经改变了，但是打印图片的src属性还是上一张图片的src，这是为什么呢？

图一是上传新图片之前的样子

图二是上传了新图片之后的样子。可以看出这两个图片是不同的。

但是上传了新图片过后打印出来的src是最开始图片的src，这是为什么呢

我的打印代码如下：

 fileReader.onload=function(evt){
                    $("#change_Image").attr("src",evt.target.result);
                }
                document.getElementById("example").innerHTML="上传";
                document.getElementById("submitLocalFile").style.display="inline-block";
                //document.getElementById("fade").innerHTML="点击右侧按钮预测:";
                $("#fade").fadeIn(1000);
        console.log($('#change_Image')[0].src)
            }

最开始改变图片的src再打印，按理来说应该图片的src更新了才对呀
这是为什么呢

Answer 1

因为你的代码贴的不完整，从前面 onload 的 function 后面的事件是异步触发的。
但是后面的 console.log 却是顺序的，可能会比修改 src 代码先执行，都加上打印看看执行顺序：

 fileReader.onload=function(evt){
                    $("#change_Image").attr("src",evt.target.result);
                                        // 把 console.log 挪到这里打印就是新的图片了
                                        console.log(' onload '+$('#change_Image')[0].src)
                }
                document.getElementById("example").innerHTML="上传";
                document.getElementById("submitLocalFile").style.display="inline-block";
                //document.getElementById("fade").innerHTML="点击右侧按钮预测:";
                $("#fade").fadeIn(1000);

                             //先执行了。
               console.log('outside onload '+$('#change_Image')[0].src)
      }