Preloading and javascript Image() objects

Sorry, this article is not written in English and has not been translated into English yet .You can view this article in English with Google Translate, or please come back later.

首先是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

280440
  • logo
    • HI, THERE!I AM MOFEI

      (C) 2010-2024 Code & Design by Mofei

      Powered by Dufing (2010-2020) & Express

      IPC证:沪ICP备2022019571号-1