Загрузите изображения браузера с помощью JavaScript?

StackOverflow https://stackoverflow.com/questions/3717852

Вопрос

У меня есть страница, содержащая множество изображений, которые изначально скрыты с точки зрения, так как я использую divs с вкладками (т. Е. Скрытие некоторых divs с использованием дисплея CSS: нет).

Поэтому, когда тогда нагрузки страницы требуется века для загрузки всех изображений, что выглядит как страница, медленная (так как панель загрузки в браузере не завершается в течение 10+ секунд).

Я хотел бы не загружать изображения, пока они не будут видны на странице.

Я играл с jquery lazyload., Однако это, кажется, только загружает изображения при прокрутке браузера (который не работает для divs с вкладками).

Поэтому есть ли способ смены лазиловой дороги работать так или есть лучший способ сделать это?

Спасибо!

Это было полезно?

Решение 6

Я не знал об этом ранее, но Lazyload поддерживает запуск от событий:

http://www.appelsiini.net/projects/lazyload

Если кому-то нужна рука о том, как я это сделал, дайте мне знать!

Другие советы

Может быть jQuery Tabs мог сделать то, что вам нужно, с вызовом Ajax на вкладки ...

Как вы показываете свои Hidden Divs?

Один план атаки:

Вместо того, чтобы поместить URL-адрес изображения в атрибуте SRC в теге IMG, поместите его где-нибудь еще (например, скрытый диапазон с определенным классом над ним) и при отображении DIV, итерации через все теги IMG и установите SRC к URL-адресу. Это должно было иметь.

Как метод, определенно получил некоторые недостатки.

Если вы используете (или можете использовать) DOCTYPE HTML5, вы можете использовать префикс «Data-» для атрибутов теги:

<img src="" data-src="/path/to/image" style="display: none" />

И тогда вы можете использовать JavaScript для заполнения SRC с Data-Src:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Если ваша единственная цель - «Скрыть» бар прогресс, который забирает так много времени из-за большого количества изображений, я бы пошел на какое-то решение AJAX, так как такого способа выполнения прогресса не «используется». Он введет больше сложности в том, как вы хотите загрузить свои HTML-элементы (и, возможно, когда).

Я лично не люблю использовать HTML-атрибуты для чего-либо, кроме их оригинальных целей, поэтому хранение пути в другом атрибуте и переключения, когда это необходимо, не будет моим первым вариантом. Вместо этого я бы попытался создать массив JavaScript (ID => Path) и обновить отдельные элементы HTML IMG при необходимости.

Удачи! ;)

Я пробовал это в последнее время и сказать, что это больше невозможно с js. Может быть, это никогда не было ... Проекты, такие как LazyLoad, всегда провозглашали, что они остановят все изображения от загрузки на запуск, но вы можете увидеть в Firebug, что это не работает. Изображения даже загружаются дважды, на Домой и при запуске прокрутки ...

Ваш единственный выбор будет Ajax на руке или делать что-то подобное:

<img src="transparent.gif" alt="" rel="real image source" />

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

Это работает нормально, по крайней мере, если вам не нужна индексирование Google их.

Надеюсь, это поможет! :)

Редактировать: HM, почему я получил -1, когда я просто дал ответ? Просто посмотрите на страницы с Lazyload и включите Firebug, а затем прокрутите страницу. Здесь было даже было сказано здесь на Stackoverflow и в комментариях для плагина Lazyload, что это единственное решение в данный момент ... :(

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top