Прежде чем продолжить, убедитесь, что все изображения загружены в функцию `$(window).load()`.

Я добавляю на страницу несколько больших изображений для слайд-шоу, но хочу начать загрузку этих изображений только тогда, когда обычная часть страницы полностью загружена (включая изображения).

Для этого я добавляю изображения в функцию $(window).load():

var slide_total = 20;

$(window).load(function() {

    for (i = 2; i <= slide_total; i++)
    {
        content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>';
        $("#slideshow li:last-child").after(content);
    }

    slide_interval = setInterval( "slideSwitch()", slide_duration );

});

Слайд-шоу slideSwitch() должно начинаться, когда все изображения полностью загружены, но сейчас оно начинается в момент добавления элементов в DOM.

Я не могу переместить цикл на функцию document.ready, так как не хочу, чтобы слайд-шоу мешало загрузке обычных изображений.

Как я могу проверить, все ли изображения загружены, прежде чем устанавливать интервал?


jquery document-ready slideshow
person jeroen    schedule 08.09.2010    source источник
comment
window.load определенно ждет, пока все загрузится, прежде чем стрелять   -  person Galen    schedule 08.09.2010
comment
@Galen, я знаю, но, как вы видите, изображения добавляются в сам window.load, поэтому он уже запущен.   -  person jeroen    schedule 08.09.2010
comment
ах да, я неправильно понял ваш вопрос   -  person Galen    schedule 08.09.2010

Ответы (1)


arrow_upward
4
arrow_downward

Попробуй это:

// get the total number of images inserted in the DOM
var imgCount = $('#slideshow img').length;

// initialize a counter which increments whenever an image finishes loading
var loadCounter = 0;

// bind to the images' load event
$("#slideshow li img").load(function() {

    // increment the load counter
    loadCounter++;

    // once the load counter equals the total number of images
    // set off the fancy stuff
    if(loadCounter == imgCount) {
        slide_interval = setInterval( "slideSwitch()", slide_duration );
    }
}).each(function() {

    // trigger the load event in case the image has been cached by the browser
    if(this.complete) $(this).trigger('load');
});
person karim79    schedule 08.09.2010
comment
Просто добавлю, что я успешно использую описанную выше технику в одном из наших веб-приложений, которое требует, чтобы что-то срабатывало после полной загрузки всех изображений в части документа. - person karim79; 08.09.2010
comment
Спасибо, но, похоже, это не работает. В IE8 и IE7 слайд-шоу начинается во время загрузки изображений. Вы уверены, что метод jquery load() можно использовать таким образом? - person jeroen; 08.09.2010
comment
@jeroen - да, я почти уверен :) Вы считаете правильные изображения? Я имею в виду, попробуйте предупредить количество изображений, чтобы убедиться, что оно правильное. - person karim79; 08.09.2010