Как узнать загрузилась ли картинка для просмотра в галерее?

Question

[Абра Кадабра]

Добрый день, как можно узнать на сколько загрузилась картинка в слайдере/галерее ? Что бы до нее поставить какую-то анимацию-ожидание, а сама картинка, что бы отображалась уже загруженной полностью. Как это делает лайтбокс, к примеру. (перебирать весь код лайтбокса, думаю, будет долго).
Иконка ajax на тостере натолкнула на мысль, что это можно сделать при помощи него. Сейчас попробую, но с ним дела не имел. Уважаемые знатоки, прошу подскажите, как лучше это реализовать?

Answer 1

[Алексей Уколов]

$('.spinner').show();

$('img').on(
    'load',
    function() {
        $('.spinner').hide();
    }
).each(function (index, img) {
    if (img.complete)
    {
        $('.spinner').hide();
    }
});

Или вот за что я люблю CoffeeScript :)

$('.spinner').show()
$('img').on('load', -> $('.spinner').hide())
    .each((index, img) -> $('.spinner').hide() if img.complete)

Comments

[Виталий Инчин ☢]

Алексей Уколов, Тега jQuery автор не поставил...

[Алексей Уколов]

Виталий Инчин: поставил, я его удалил :)

[Алексей Зуев]

У изображений есть свойство complete. Если картинка в кеше, то событие load не сработает. Так что может еще добавить проверку на complete

[Алексей Уколов]

Алексей Зуев: вы правы, обновил.