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

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

3 голосов
/ 08 сентября 2010

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

Для этого я добавляю изображения в функцию $(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, поскольку не хочу, чтобы показ слайдов мешал загрузке обычных изображений.

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

1 Ответ

4 голосов
/ 08 сентября 2010

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

// 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');
});
...