Preview Image object in javascript

แต่ละภาพใน HTML document นั้นจะถูกแทนด้วย Image object ใน javascript สามารถเรียกใช้ object image ใน document ได้โดย

document.images[index]; //call by position in array
document.images.name; //call by name


สามารถเรียกใช้ constructor โดย:


var obj = new Image([width], [height]);




Properties ที่ใช้บ่อยๆ:





properties
description




height
set or return image’s height




width
set or return image’s width




src
set or return URL source




name
set or return image’s name





Events:





event
description




onload
execute when successful and complete to download image




onabort
execute when user abort download image




onerror
execute when error occur while loading image (image not found)





more source: w3schools, mozilla developer center



example image preloading:


html code:
<html>
<head>
<title>example image object</title>
<style type="text/css">
#thumb_container img{
	margin:2px;
	cursor:pointer;
}
</style>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<table border="0"  width="630" height="430">
  <tr align="center" valign="middle">
    <td><img name="loading_img" src="images/animal1.jpg" /> </td>
  </tr>
</table>
<table border="0"  width="630" >
  <tr align="center" valign="middle">
    <td><div id="thumb_container"><img src="images/thumb_animal1.jpg" rel="images/animal1.jpg" /><img src="images/thumb_animal2.jpg" rel="images/animal2.jpg"/><img src="images/thumb_animal3.jpg" rel="images/animal3.jpg"/></div>
  </tr>
</table>
</body>
</html>


javascript code in example.js:
01
function change_img(url){
02
	document.images.loading_img.src = 'images/loading.gif';//show loading image
03
	var img = new Image();
04
	img.onload = function(){
05
		document.images.loading_img.src = url;//change image when loading complete
06
	}
07
	img.src = url;//preload image
08
}
09
function onclick_thumb(){
10
	var e = arguments[0] || window.event;//get event object, note: this fix for IE
11
	var target_img = e.target || e.srcElement;//get target object (ie: image object), note: this fix for IE
12
	var url = target_img.getAttribute('rel');//get url form attricute 'rel'
13
	change_img(url);
14
}
15
function init_example(){
16
	var thumb_obj = document.getElementById('thumb_container').getElementsByTagName('img');//get thumbnail image's objects
17
	for(var i in thumb_obj){
18
		thumb_obj[i].onclick = onclick_thumb;//add onclick event for each object
19
	}
20
	var img = new Image();
21
	img.src = 'images/loading.gif';//preloading loading image
22
}
23
if(window.addEventListener){
24
	window.addEventListener("load", init_example, false); //run initial fuction when complete loading object
25
}else if(window.attachEvent){
26
	window.attachEvent("onload",init_example);//fix run initial fuction for fucking browser(IE)
27
} 


demo here

source here


								
Tags: 

				

					
						This entry was posted
												on Sunday, March 15th, 2009 at 8:19 am						and is filed under Javascript.
						You can follow any responses to this entry through the RSS 2.0 feed.

													You can skip to the end and leave a response. Pinging is currently not allowed.

						
					
				


			

            
		

        

	






	

	

	
    
			
  1. 
				
    
				
    
				Nutt says:		
    

		
    March 17, 2009 at 10:35 am
    

		
    เจ๋งดีนะ
    

		
    
				
    
				
    
		
    2. 
	

	








    

  1. There are no trackbacks for this post yet.
    2. 




 
 

	

		

		

	

  

	
 





Leave a Reply