Предварительная загрузка изображений: проблема только в IE - PullRequest
Новая
       24

Предварительная загрузка изображений: проблема только в IE

0 голосов
/ 31 мая 2011

Следующий код работает в каждом браузере, принимает все версии IE, может кто-нибудь, пожалуйста, помогите! Кажется, есть проблема с методом cat.onload .... Я сделал так много тестов, и я в растерянности ... любая помощь будет оценена

Спасибо! 

var bannerCount = 0;
var bannerImgsArr = new Array();
bannerImgsArr[0] ='image1.jpg';
bannerImgsArr[1] ='image2.jpg';
bannerImgsArr[2] ='image3.jpg';
bannerImgsArr[3] ='image4.jpg';

$(document).ready(function() {
  preloadBannerImages();
});

function preloadBannerImages(){
    //create new image object
    var cat = new Image();

    //give Image src attribute the image file name
    cat.src =bannerImgsArr[bannerCount];

    //if the counter represents the last image in the current gallery enter here: 
    if(bannerCount == 3){

        //When the image has been loaded the following function is exicuted 
        cat.onload = function() {
            //Removes the LOADING message hard coded into the html page;
            document.getElementById("bigbox").removeChild(document.getElementById("loading"));
        }

    }else{

        //when current image is finished loading increments the img index and 
        //calls the loading function again for the next image in the gallery

        bannerCount++;
        cat.onload =preloadBannerImages;

    }
}

Ответы [ 3 ]

1 голос
/ 31 мая 2011

Вы определяете обработчик onload для изображения после установки свойства src. Делай одно раньше другого.

Если это не решит вашу проблему, вам действительно нужно уточнить, что именно не работает.

0 голосов
/ 31 мая 2011

Не полагайтесь на событие загрузки изображений, оно может не сработать, если изображение было загружено ранее и поступает из кэша

0 голосов
/ 31 мая 2011

[править]

Скорее всего, функция завершается и снова вызывает себя перед загрузкой изображения, поэтому изображение не кэшируется.Загрузите изображения в постоянное хранилище (например, массив), которое хранится до тех пор, пока все они не будут загружены и кэшированы.

[/ edit]

Вам не нужно ждать, пока DOM будетготовность к загрузке изображений: 

var bannerCount = 0;
var bannerImgsArr = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg'];
var imageArray = [];

for (var i=0, iLen=bannerImgsArr.length; i<iLen; i++) {
  imageArray[i]  = new Image();
  imageArray[i].src = bannerImgsArr[i];
}

Теперь, когда DOM готов, вы можете использовать одно из предварительно загруженных изображений. 

...
cat.src = imageArr[bannerCount].src;
...
...