如何預加載圖像，然后在完成圖像加載后更改div內容

Question

我正在嘗試預加載一堆圖像，然后在完全加載它們之后，更改div的內容，到目前為止，這是我的代碼，但它只會使我的瀏覽器陷入無限循環。 任何幫助都會很棒。 謝謝！

    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

我相信您需要為圖庫預加載某種圖像。 我在索引網頁中實現了該代碼：

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

看看是否適合您。