如何预加载图像，然后在完成图像加载后更改div内容

Question

I am trying to preload a bunch of images, and then once they are FULLY loaded, change the contents of a div, here is my code so far, but it just throws my browser into an infinite loop. Any help would be great. Thanks!

    var mydir ='slideshow_pics/';
var myArray = new Array();
myArray[0] = mydir+'0.jpg';
myArray[1] = mydir+'1.jpg';
myArray[2] = mydir+'2.jpg';
myArray[3] = mydir+'3.jpg';
myArray[4] = mydir+'4.jpg';
myArray[5] = mydir+'5.jpg';
myArray[6] = mydir+'6.jpg';
myArray[7] = mydir+'7.jpg';

var myWidth = new Array();
myWidth[0] = '470';
myWidth[1] = '450';
myWidth[2] = '450';
myWidth[3] = '500';
myWidth[4] = '550';
myWidth[5] = '450';
myWidth[6] = '800';
myWidth[7] = '300';

var myCheck = new Array();

function preloader(images){
         var i = 0;

         // start preloading
         for(i=0; i<=images.length; i++){
            imageObj = new Image();
            imageObj.src=images[i];
            imageObj.onLoad = check(i, images.length);
         };

    }


function checkimg(data, w) {
        p=0;
        z=0;
        o = 'no';
        var myImg = new Image();
        myImg.src = data;

        while (p == 0) {

            if (myImg.naturalWidth == w) {
            p = 1;
            o = 'yes';
            }
        z++;
        }
return o;

}


function check(e,i) {


        if( e == i ){

             if (document.getElementById('myss') != null) {

    //now we need to make sure each image is fully loaded
    for(i=0; i<=myArray.length; i++){

        p=0;
        z=0;

        myCheck[i] = checkimg(myArray[i], myWidth[i]);


    }//end foreach

    if (myCheck.join('') == 'yesyesyesyesyesyesyesyes') {

    document.getElementById('myss').innerHTML = '<embed src="RectangleSlideshow.swf" width="1028px" height="324px"></embed>';

        }
    }

        };
    }

Answer 1

I believe you need a sort of image pre-loading for a gallery. I have that code implemented in my index web page:

http://www.becomingthebeast.com/index.html

See if it works for you.