js图片预处理的问题

在《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';有什么区别,为什么这样就可以确保图片立刻替换?

阅读 2.9k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题