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

@Peter Ajtai ответ будет работать, кроме как для кэшированных изображений IE. Чтобы заставить его работать с IE, вот решение: https://stackoverflow.com/a/3877079 или с помощью imagesLoaded .

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

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

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

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

Обратитесь

1. Запускать JavaScript только после загрузки всей страницы
2. Обратный вызов jQuery при загрузке изображения (даже когда изображение кэшируется)

Код

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

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

$(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's retrieve how many images there are
    var numImages = $("img").length;

      // Let's 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

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

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