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

Question

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

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

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

Я поиграл с jQuery LazyLoad , однако, похоже, это загружает изображения только при прокрутке браузера (что не работает для div с вкладками).

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

Спасибо!

Answer 1

Раньше я не знал об этом, но LazyLoad поддерживает запуск по событиям:

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

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

Answer 2

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

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

Удачи! ;)

Answer 3

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

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

И затем вы можете использовать Javascript для заполнения src data-src:

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

Answer 4

В последнее время я пробовал это и должен сказать, что это невозможно с js больше.Возможно, этого никогда не было ... Такие проекты, как lazyload, всегда заявляли, что они остановят загрузку всех изображений при запуске, но вы можете увидеть в firebug, что это не работает.Изображения даже загружаются дважды, в режиме готовности и когда вы начинаете прокручивать ...

Единственным выбором будет ajax на руках или что-то вроде этого:

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

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

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

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

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

Answer 5

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

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

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

Answer 6

Может быть jQuery Tabs может делать то, что вам нужно, с помощью вызова ajax на вкладках ...

Как вы показываете свои скрытые div?