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

Мне нужно показать значок загрузки, когда я назначаю URL-адрес элементу изображения. Я просмотрел другие вопросы на этом сайте, в которых подробно рассказывается только о том, как показать изящный предварительный загрузчик изображений при загрузке страницы. Мне нужно показать предварительный загрузчик после загрузки страницы. Есть 2 сценария того, что я ищу, которые я объяснил ниже.

  1. Я динамически создаю элемент изображения DOM и назначаю этому элементу URL-адрес. При этом для отображения изображения на элементе требуется около 2-3 секунд, и на эти 2-3 секунды область становится пустой. Что мне нужно сделать, так это показать значок предварительной загрузки и скрыть его после загрузки изображения.

  2. Я динамически создаю элемент изображения DIV и назначаю URL-адрес background:url(). При этом для отображения изображения на элементе требуется около 2-3 секунд, и на эти 2-3 секунды область становится пустой. Что мне нужно сделать, так это показать значок предварительной загрузки и скрыть его после загрузки изображения.

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


javascript image html image-preloader
person Abishek    schedule 11.12.2012    source источник
comment
Не могли бы вы опубликовать пример кода того, что вы сейчас делаете, чтобы загрузить изображение, пожалуйста.   -  person Tim    schedule 11.12.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать это, используя событие load().

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

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

Вам нужно будет проделать аналогичный трюк для связанного с CSS (фонового URL). Что вы можете сделать, так это загрузить изображение напрямую (создав new Image()), а в качестве фонового URL-адреса указать значок предварительного загрузчика.

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

person samanime    schedule 11.12.2012
comment
Спасибо, похоже, это решит проблему. Ценю твою помощь. - person Abishek; 11.12.2012

arrow_upward
0
arrow_downward

Для этого есть хорошее руководство и видеозапись: http://jqueryfordesigners.com/image-loading/

Хотя в некоторых браузерах (например, в старых версиях IE) функция .load() не так хорошо работает с изображениями, в этом случае вы можете использовать: https://github.com/JessThrysoee/jquery.imageload вместо .load() для более согласованной работы в разных браузерах.

person Tim    schedule 11.12.2012