Как запустить код jQuery после загрузки всех изображений на моей странице?

Ответы

Ответ 1

$(window).load(function(){})

Ответ 2

Проверка на то, что все изображения загружены, немного задействована, поэтому, если у вас нет нажимающей необходимости, чтобы быть настолько точным, гораздо легче проверить, что загружено все изображение и все остальное:

$(window).load(function() { ... });

Это использует метод jQuery . load().

Если вам действительно нужно проверять только изображения, тогда все становится немного сложнее. Сначала я хотел сделать это:

$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!

Однако приведенное выше создает объект jQuery, содержащий все изображения, а затем привязывает function() { ... } к каждому к этим изображениям. Таким образом, вышесказанное вызовет функцию столько раз, сколько есть изображений на странице!

Чтобы обойти это, мы должны проверить, сколько изображений есть на странице, и только запускать функцию один раз после загрузки всех этих изображений:

$(function() {  

      // To keep track of how many images have loaded
    var loaded = 0;

      // Let retrieve how many images there are
    var numImages = $("img").length;

      // Let bind a function to the loading of EACH image
    $("img").load(function() {

          // One more image has loaded
        ++loaded;

          // Only if ALL the images have loaded
        if (loaded === numImages) {

              // This will be executed ONCE after all images are loaded.
            function() { ... }   
        }
    });
});

Пример jsFiddle

Ответ 3

$(function() {
 var length = $('img').length ;
 var counter = 0;
 $('img').each(function() {
     $(this).load(function(){
        counter++;
        if(counter == length) {
           Callback(); //do stuff
        }
     });
   });
});

Ответ 4

В последнее время я сделал что-то подобное, но пошел по-другому.

$('img').on('load', function(){
    $('img').off('load'); //detaches from load event, so code below only executes once
    // my code to execute
});

Ответ 5

Не прямой ответ. Все еще стоит ссылаться.

Обратитесь

код

$(window).bind("load", function() {
   // code here
});

Ответ 6

@Peter Ответ Ajtai будет работать, за исключением кэшированных изображений IE. Чтобы заставить его работать с IE, вот решение: fooobar.com/questions/27346/... или с помощью imagesLoaded.

Ответ 7

Для тех, кто использует jquery, этот маленький фрагмент делает трюк (он гарантирует, что все изображения загружаются до того, как все script внутри него будут запущены)...

$(window).bind("load", function() {
   // code goes here here
});