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

Question

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

$(function() { 
    var $img = $('img'); 
    var length = $img.length; 
    var count = 0; 

    function load() { 
     console.log(++count + ' == ' + length); 
     if (count == length) { 
      // all images loaded 
     } 
    } 
    $img.load(load).error(load); 
}); 

Я также пытаюсь использовать OnLoad и OnError события:

$img.each(function() { 
    this.onload = load; 
    this.onerror = load; 
}); 

но когда страница загружена, я получил только один журнал:

1 == 33 

(Я тестирую в Chromium на Xubuntu с Dev Tools и кеш отключен)

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

Answer 1

Звуки, как вы должны быть обработки на window «s load событие:

$(window).load(function() { 
// Glorious code!! 
} 

Из документов: «Запустите функцию, когда страница полностью загружена, включая графику».

http://api.jquery.com/load-event/

Answer 2

Выполните функцию, когда после загрузки страницы

$(window).load 

Таким образом, все элементы находятся на месте и готовы к «измеряемую»