สามารถเรียกใช้ 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:


javascript code in example.js:function change_img(url){
document.images.loading_img.src = 'images/loading.gif';//show loading image
var img = new Image();
img.onload = function(){
document.images.loading_img.src = url;//change image when loading complete
}
img.src = url;//preload image
}
function onclick_thumb(){
var e = arguments[0] || window.event;//get event object, note: this fix for IE
var target_img = e.target || e.srcElement;//get target object (ie: image object), note: this fix for IE
var url = target_img.getAttribute('rel');//get url form attricute 'rel'
change_img(url);
}
function init_example(){
var thumb_obj = document.getElementById('thumb_container').getElementsByTagName('img');//get thumbnail image's objects
for(var i in thumb_obj){
thumb_obj[i].onclick = onclick_thumb;//add onclick event for each object
}
var img = new Image();
img.src = 'images/loading.gif';//preloading loading image
}
if(window.addEventListener){
window.addEventListener("load", init_example, false); //run initial fuction when complete loading object
}else if(window.attachEvent){
window.attachEvent("onload",init_example);//fix run initial fuction for fucking browser(IE)
}

demo here
source here