javascript - js图片预处理的问题

Question

在《JavaScript基础教程》上看到一个关于翻转器和js图片预处理结合的例子

<a href="#"><img src="1.jpg"></a>

var oImg = document.getElementsByTagName('img')[0];
    oImg.overImage = new Image();
    oImg.overImage.src = '2.jpg';
    oImg.outImage = new Image();
    oImg.outImage.src = oImg.src;
    oImg.onmouseover = function() {
        this.src = this.overImage.src;
    }
    oImg.onmouseout = function() {
        this.src = this.outImage.src;
    }

书上说这样可以确保图片立刻替换。但是我有些不解，this.src = this.overImage.src;这句中，this.overImage.src;返回的不仅仅是一个翻转图片地址的字符串吗，这和this.src = '2.jpg';有什么区别，为什么这样就可以确保图片立刻替换？

Answer 1

这个是这样的，this.overImage.src相当于oImg.overImage的src，不是oImg的src，它是先把1.jpg和2.jpg的url用oImg创建的两个属性overImage和outImage存起来，等到你鼠标移上去的时候，oImg才接受src的替换，这时候图片已经加载好了，new Image().src相当于加载一张图片