noys Apr 4 2014 at 14:40

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

2 min

35K

Website development*JavaScript*jQuery*

From sandbox

Recovery Mode

-5

Comments 16

k12th Apr 4 2014 at 14:48

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

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

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

noys Apr 4 2014 at 14:54

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

k12th Apr 4 2014 at 15:04

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

lolmaus Apr 4 2014 at 15:08

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

k12th Apr 4 2014 at 15:10

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

noys Apr 4 2014 at 15:15

А если это Progressive JPEG?

k12th Apr 4 2014 at 15:16

См.

lolmaus Apr 4 2014 at 15:06

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

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

k12th Apr 4 2014 at 15:08

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

Dima_Sharihin Apr 4 2014 at 15:19

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

Voenniy Apr 4 2014 at 15:21

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

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

Voenniy Apr 4 2014 at 15:27

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

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

jsfiddle.net/Sxjmk/59/

noys Apr 4 2014 at 16:38

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

-1

oWeRQ Apr 4 2014 at 15:21

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

demimurych Apr 5 2014 at 04:14

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

SergeyKuzmich Apr 4 2014 at 16:46

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

Show the best of all time