Javascript图像预加载对象

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript图像预加载对象相关的知识，希望对你有一定的参考价值。

How to use:

1) < script type="text/javascript" src="path-to-file.js"...

2) < body onload="oHW.preMontar('img1_on.jpg','img2_on.jpg','img3_on.jpg');"...

3) < a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mnind','img1_on.jpg')"

Credentials:

Image Rollovers | flipping images with JavaScript onMouseOver || htmlSource ]
http://www.yourhtmlsource.com/images/rollovers.html#theimageflip
  1. <html>
  2. <head>
  3.     <script type="text/javascript">
  4. 	oHW = {
  5.  
  6. 		myimgs : new Array(),
  7. 		reimgs : new Array(),
  8. 		oId : '',
  9. 		preMontar : function() {
  10. 			for (v=0; v<this.preMontar.arguments.length; v++){
  11. 				this.myimgs[v] = new Image();
  12. 				this.myimgs[v].src = this.preMontar.arguments[v];
  13. 			}
  14. 		},
  15. 		Cambiar : function(myid,n) {
  16. 			this.myimgs[myid] = document.getElementById(myid).src;
  17. 			this.oId = myid;
  18. 			document.getElementById(myid).src = n;
  19. 		},
  20. 		Restore : function() {
  21. 			document.getElementById(this.oId).src = this.myimgs[this.oId];
  22. 			this.oId = '';    
  23. 		}
  24.  
  25. 	} // ..	
  26. 	</script>
  27. </head>
  28.  
  29. <body onload="oHW.preMontar('img1_on.jpg','img2_on.jpg','img3_on.jpg');">
  30.  
  31. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn1','img1_on.jpg')"><img border="0" id="mn1" src="img1.jpg" alt="" /></a>
  32.  
  33. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn2','img2_on.jpg')"><img border="0" id="mn2" src="img2.jpg" alt="" /></a>
  34.  
  35. <a href="#" onmouseout="oHW.Restore()" onmouseover="oHW.Cambiar('mn3','img3_on.jpg')"><img border="0" id="mn3" src="img3.jpg" alt="" /></a>
  36.  
  37.  
  38. </body>
  39. </html>

以上是关于Javascript图像预加载对象的主要内容，如果未能解决你的问题，请参考以下文章

收藏|分享前端开发常用代码片段

Javascript图像预加载对象

关于js----------------分享前端开发常用代码片段

js 常用代码片段

JavaScript 图像预加载和 403 错误

在 iOS 中使用 javascript 预加载图像