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

Question

[Bestolkovy]

Здравствуйте!

Есть контейнер с изображениями:

<div class="container" style="width: 540px">
    <a href="#"><img src="images/1.jpg" alt="" /></a>
    <a href="#"><img src="images/2.jpg" alt="" /></a>
    <a href="#"><img src="images/3.jpg" alt="" /></a>
    <a href="#"><img src="images/4.jpg" alt="" /></a>
    <a href="#"><img src="images/5.jpg" alt="" /></a>
    <a href="#"><img src="images/6.jpg" alt="" /></a>
    <a href="#"><img src="images/7.jpg" alt="" /></a>
    <a href="#"><img src="images/8.jpg" alt="" /></a>
</div>

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

Спасибо!

Answer 1

[Ro37A]

Используйте событие load. Вы можете повесить обработчик на элемент содержащий url (img, script, frame, iframe), а так же объект window. Но в случае с элементом img есть ряд проблем, который заставляет отказаться от возможности повесить обработчик на коллекцию изображений.
Метод load отмечен как deprecated в версии 1.8 и удален в версии 3.0, поэтому рекомендуется использовать конструкцию

$( window ).on("load", function() {
  // your code here...
})

Answer 2

[iBird Rose]

$( window ).load(function() {
  //скрипт
});