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

15
faressoft 8 Сен 2010 в 22:31

7 ответов

Лучший ответ
$(window).load(function(){})
39
meder omuraliev 8 Сен 2010 в 18:32

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

0
Community 23 Май 2017 в 12:10

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

$(window).bind("load", function() {
   // code goes here here
});
0
NSCoder 26 Июл 2013 в 17:02
$(function() {
 var length = $('img').length ;
 var counter = 0;
 $('img').each(function() {
     $(this).load(function(){
        counter++;
        if(counter == length) {
           Callback(); //do stuff
        }
     });
   });
});
5
user372551user372551 8 Сен 2010 в 18:40

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

Обратитесь

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

Код

$(window).bind("load", function() {
   // code here
});
1
Community 23 Май 2017 в 12:34

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

$(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

20
Peter Ajtai 8 Сен 2010 в 20:05

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

$('img').on('load', function(){
    $('img').off('load'); //detaches from load event, so code below only executes once
    // my code to execute
});
1
renaekathleen 29 Янв 2013 в 22:33