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

时间:2011-04-19 22:01:56

标签: javascript image preload

我正在尝试预加载一堆图像,然后一旦它们被完全加载,更改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>';

        }
    }

        };
    }

1 个答案:

答案 0 :(得分:0)

我相信您需要为图库预加载一种图像。 我在索引网页中实现了该代码:

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

看看它是否适合你。