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

Question

Я перерисовываю контент <div> с помощью функции ajax с Ruby On Rails. Я переправляю partial в div, и я хочу знать, когда все изображения загружены, потому что теперь у меня естьэто:

$(document).ready(function(){
    $("img").load(function(){
        alert("ok?");
    });
});

но с этим я продолжаю получать alet для каждого изображения в этом фрагменте ....

я не знаю, если есть селектор, такой как $(allimgs) или что-то в этом родевот так, что мне нужно сделать, чтобы перехватить, когда все изображения загружены?

Большое спасибо.

Answer 1

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

Чтобы свернуть свой собственный, сделайте что-то вроде этого:

 $(document).ready(function(){
    var imgs = $("img"), cnt = imgs.length;

    imgs
    .load(function(){
      if(!--cnt) {
        /* all images loaded */
      }
    })
    .error(function() { /* whoops an image failed to load */});
  });

Answer 2

Будет что-то вроде: сначала мы посчитаем, сколько imgs у нас на странице, каждая загрузка img будет уменьшать счетчик на 1, а когда он равен 0, это означает, что все изображения загружены.

 $(document).ready(function(){
     var allimgs = $("img");
     var count = allimgs.length;

     allimgs.load(function(){
          if(--count == 0) {
              alert("all images are loaded");
          }
     })
  });

---

** РЕДАКТИРОВАНИЕ **

Если браузер кэширует изображения, попробуйте вместо этого:

 $(document).ready(function(){
     var allimgs = $("img");
     var count = allimgs.length;

      $("img").one('load', function() {
           count--;
           if(count == 0) {
              alert("all images are loaded");
           }
      }).each(function() {
           if(this.complete) $(this).load();
      });
  });

Answer 3

Возможно, вам понадобится подключаемый модуль для загрузки изображений, чтобы ваш код работал с кэшированными изображениями и т. Д. https://github.com/paulirish/jquery.imgloaded

а затем ваш код

var total_number_of_images  = $("img").length;
var loaded_images = 0;

$("img").load(function(){
               loaded_images++;
if loaded_images =   total_number_of_images {
// do something ...

}              });