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

Question

[gibigate]

Привет всем и спасибо заранее за ваш ответ :)

Задача такая, есть галерея с множеством картинок, как на картинке, на странице может быть около 100-200 таких галерей.

Элементы управления создаются через js при первом наведений.
Оптимизировали как только могли, сейчас js следит за положением мыши и меняет соответственную картинку грубо через element.src="", в связи с этим картинка может "застыть" пока не загрузиться.


Подскажите как можно уведомлять пользователя о том, что картинка грузится (он может быстро переместить мышь в сторону, и тогда на очереди загрузки встанет 30 картинок).
И как отслеживать, что картинка загрузилась?
Через jquery.load пробовали, не совсем подходит для нас.

Answer 1

[Eugene Obrezkov]

Вместо того, чтобы грубо проставлять на src, используйте Image.
Накидал от руки такой код:

var image = new Image();
image.src = 'images/someCoolPicture.png';
image.onload = function() {
    yourImage.src = this.src;
}

Comments

[gibigate]

Да спасибо, уже был такой код, проблема возникает в семествах ИЕ ниже 10, функция вызывается в редких случаях, логику понять не могу. То есть пользователь пробежался курсором по картинке, в очередь встала 30 картинок, в консоли отслеживается событие закачки, но нет событий финиша. Не знаете такой проблемы?

[Eugene Obrezkov]

@gibigate можете поставить таймаут при проведении мышки. То есть начать грузить картинку только после 200 мс после того, как навели мышку, например. А для отслеживания загрузки изображения можете использовать событие load или использовать https://github.com/desandro/imagesloaded

Answer 2

[Facetrollex]

Вы через ajax грузите?
Если да, то просто в beforeSend уведомите пользователя о загрузке, а в success убирайте это уведомление и соответственно проставляйте атрибут src.

Comments

[gibigate]

нет, изменяю src главной картинки