预加载和javascript Image()对象

首先是Image()对象的使用,直接贴代码

function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";
}

以下代码预先加载了heavyimgefile.jpg,当在onMouseOver的时候就不会出现等待的情况。 如果想一次预加载很多张图片可以用以下的代码

function preloader() 
{

 // counter
 var i = 0;

 // create object
 imageObj = new Image();

 // set image list
 images = new Array();
 images[0]="image1.jpg"
 images[1]="image2.jpg"
 images[2]="image3.jpg"
 images[3]="image4.jpg"

 // start preloading
 for(i=0; i<=3; i++) 
 {
  imageObj.src=images[i];
 }

}

然后是很实用的,经常会遇到在图片加载完成之前提示图片加载中,然后图片加载好了再显示图片,这里给出demo

// create an image object
objImage = new Image();

// set what happens once the image has loaded objImage.onLoad=imagesLoaded();

// preload the image file
objImage.src='images/image1n.gif';

// function invoked on image load
function imagesLoaded()
{    
 document.location.href='index2.html';
}

Please wait, loading images...

应该很好理解的,上面的例子,先创建Image()对象,然后预加载,通过objImage.onload这个来实现图片加载完成之后执行某些方法之类的。

贴出英文原文的出处,有兴趣的话可以自己过去看看,写的很不错 http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Write a response...
Mofei Zhu
publish