Простой индикатор загрузки картинки на Jquery

[k12th]

Почему не просто

.img { background: #555 url('http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif') center center no-repeat;  }

?
Картинка загрузится и заслонит фон. Джаваскрипта не нужно совсем.

[noys]

При загрузке картинка будет заслонять фон, какой в этом смысл? Мы же показываем затемнение в процессе загрузки картинки, скрывая наготу.

[k12th]

Смысл в том, что показывается лоадер, пока картинка не загрузится.

[lolmaus]

1) На 60% крутилка перестанет быть видна.
2) Вместо элегантной затемняющей заглушкии видим частично картинки, обнажающие фон.

[k12th]

Ну есть такие проблемы, да. Зато мой способ работает даже при выключенном JS.

[noys]

А если это Progressive JPEG?

[k12th]

См.

[lolmaus]

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

Кроме того, не сработает для progressive JPGs.

[k12th]

Дык для прогрессивного JPG и лоадер не нужен, он сам себе лоадер (как и черезстрочный PNG, кстати):)

[Dima_Sharihin]

Все ajax-загрузчики (ну, почти) грузят картинки в base64, а не все браузеры хотят показывать прогресс для POST запроса x-form-data/urlencoded.
Как жить?

[Voenniy]

Если две (или больше) картинки — то лоадер с фоном пропадут, только когда загрузится последняя. jsfiddle.net/Sxjmk/50/

А скрипт хороший, спасибо.

[Voenniy]

Вот так будет работать как надо

$(function() {
    $('.img').load(function() {
       $(this).parent().find(".loading").hide();
    });
});

jsfiddle.net/Sxjmk/59/

[noys]

Благодарю, этот код гораздо лучше. Однако с IE и с этим кодом бидэ.

[oWeRQ]

Ужасное решение:
1. images.load может не вызываться для уже загруженных картинок и оверлей никогда не скроется для всех картинок на странице
2. ужасный пример стилей, z-index не к месту, класс ".img", который напрашивается на удаление точки
3. ужасный пример кода, поиск всех элементов на странице, за такое вообще руки отрывать надо: $('.loading').hide();

[demimurych]

Приведите пожалуйста примеры пункта 1.

[SergeyKuzmich]

По мне для этой задачи вполне подходит lazyLoad для того же jQuery.