Предварительный загрузчик изображений

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

Проблема, с которой я сталкиваюсь, заключается в том, что код пропускает настройку фона с низким разрешением и загружает изображение с высоким разрешением.

Вот код:

// Low res image array
    var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
    var lowresimagepath = "url(images/rotate-background/low_res/";
// Full res image path
    var imagepath = "url(images/rotate-background/";

// Counter
    var i = 0;  

// Image preloading
       for(i=0; i<=images.length; i++) 
       {
           // Create object
           imageObj = new Image(); 

           imageObj.src = imagepath + images[i] + ')';
       }

//Generate random number
    var rannum = Math.floor(Math.random() * images.length);    

//Set background image to random low res image
    $(".bg_home").css({'background-image': lowresimagepath +lowres[rannum]+')'});       

//Once image objects are loaded switch to high res image 
     imageObj.onLoad= function(){ 
                          $(".bg_home").css({'background-image': imagepath + images[rannum] + ')'});    
                      }

javascript jquery preloader
person Maverick Johnson    schedule 29.08.2012    source источник
comment
imageObj.src = путь к изображению + изображения [i] + ')'; Я не уверен, что это просто опечатка.   -  person Onur Topal    schedule 29.08.2012
comment
Спасибо, что указали на это, это была ошибка в моем коде. Я исправил это, хотя у меня все еще та же проблема. (Я отредактировал свой пост, чтобы отразить это)   -  person Maverick Johnson    schedule 29.08.2012
comment
в последней строке вы должны обернуть свой код внутри функции imageObj.onLoad = function(){......}   -  person Aram Alipoor    schedule 29.08.2012
comment
и у вашей генерации случайных чисел есть проблема. снимите кронштейны вокруг напольного метода. var rannum = Math.floor(Math.random() * images.length);   -  person Aram Alipoor    schedule 29.08.2012
comment
А что касается вашего цикла, вы должны использовать for(i=0; i<images.length; i++), используя литерал 3, это неправильно.   -  person Aram Alipoor    schedule 29.08.2012
comment
а также вы должны создать экземпляр объекта Image для каждого изображения, поэтому переместите new Image() внутри своего цикла.   -  person Aram Alipoor    schedule 29.08.2012

Ответы (3)


arrow_upward
0
arrow_downward

src объектов Image является свойством css. Это должен быть просто URL

imageObj.src = imagepath + images[i] + ')'; //Generates "url('whatever');"
//It can't be that, must just be the path.
person Jacob Lauritzen    schedule 29.08.2012

arrow_upward
0
arrow_downward

По моему опыту, image.onLoad не очень надежен. Есть разные случаи, когда это не работает, например. IE или кешированные изображения.

Я бы взглянул на https://github.com/desandro/imagesloaded. Я использовал это библиотека, и она отлично работает.

Что касается вашего кода, он кажется недействительным:

// Low res image array
var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
var lowresimagepath = "images/rotate-background/low_res/";
// Full res image path
var imagepath = "images/rotate-background/";

//Generate random number
var rannum = Math.floor(Math.random() * images.length);      

for(var i = 0; i < images.length; i++) {
    var image = new Image();
    image.src = imagepath + images[i];

    if(i == rannum) {

        //Set background image to random low res image
        $(".bg_home").css({'background-image': 'url(' + lowresimagepath +lowres[i]+')'});       

        //Once image objects are loaded switch to high res image 
        iamge.onLoad= function() { 
                $(".bg_home").css({'background-image': 'url(' + imagepath + images[i] + ')'});   
        };

    }

}

Это работает при условии, что ваша идея состоит в том, чтобы добавить одно случайное изображение на ваш фон, в то время как все изображения загружаются в фоновом режиме.

person Peeter    schedule 29.08.2012
comment
Я пробовал это. похоже, он не переключается на изображения с высоким разрешением (я исправил вашу опечатку в image.onload, когда пробовал), хотя, похоже, он предварительно загружается. - person Maverick Johnson; 29.08.2012
comment
Есть ошибки? image.onLoad вообще срабатывает? Добавьте console.log или что-то в функцию, чтобы увидеть, запущена ли она. Если это не так, попробуйте плагин, который я рекомендовал. - person Peeter; 29.08.2012
comment
Загрузка, похоже, не срабатывает, похоже, я буду использовать этот плагин, спасибо за усилия и ссылку. - person Maverick Johnson; 29.08.2012

arrow_upward
0
arrow_downward

У вашего кода много проблем, вот чистая версия, которую я сделал, но она не тестировалась.

(function(){ // prevents name conflicting with other scripts 

    var BASE_PATH_LOW_RES = "images/rotate-background/low_res/",
        BASE_PATH_HIGH_RES = "images/rotate-background/"; // since these are constants its better to use capitalized letters

    var lastLoadedIndex = 0, // you must ensure all images are loaded and its hard to preload them in parallel
        randomIndex = Math.floor(Math.random() * images.length),
        images = [
            {low: "image1lr.jpg", high: "image1.jpg"},
            {low: "image2lr.jpg", high: "image2.jpg"},
            {low: "image3lr.jpg", high: "image3.jpg"},
            {low: "image4lr.jpg", high: "image4.jpg"}
        ];

    var onComplete = function() {
        $(".bg_home").css({'background-image': 'url(' + BASE_PATH_HIGH_RES + images[randomIndex] + ')'});
    }

    var loadNext = function(){
        if(lastLoadedIndex == images.length) { // all images has been preloaded
            onComplete();
        } else {
            var imgTemp = new Image();
                imgTemp.src = BASE_PATH_HIGH_RES + images[lastLoadedIndex++].high;
                imgTemp.onLoad = loadNext;
        }
    }

    $(".bg_home")
        .css({'background-image': 'url(' + BASE_PATH_LOW_RES + images[randomIndex].low + ')'});       

    loadNext(); // start to preload every image one after another
})();
person Aram Alipoor    schedule 29.08.2012
comment
Спасибо за всю вашу помощь, кажется, проблема в .onload, поэтому я буду использовать плагин, предложенный другим автором. Хотя я многому научился из этого поста, так что спасибо. - person Maverick Johnson; 29.08.2012