Загрузка изображений по запросу (или отключить загрузку скрытых изображений)

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

Изначально все сабдивы скрыты, кроме основного.

Моя проблема в том, что все веб-браузеры загружают (запрашивают) все изображения в контенте, скрыты они или нет.

В частности, в моем случае за один раз загружается около 350 изображений. Это много, особенно если учесть, что размер изображений не менее 200 КБ. На самом деле в сетевом журнале указано, что общий размер веб-сайта находится в диапазоне от 6 МБ до 7 МБ.

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

Каково решение моей проблемы? Вещи, которые я уже пробовал:

  • загрузка каждого подраздела как ajax. Это невозможно, содержимое страницы должно быть там все время.
  • скрытие самих изображений (в надежде, что веб-браузер их не загрузит). Это не удалось, браузер по-прежнему загружал изображения с CSS display:none;.
  • Возможное решение: намеренно нарушить разметку (на стороне сервера), чтобы браузер не загружал изображения, например; написав <img alt="abc.jpg" src="about:blank"/>, то при переключении вкладок я бы корректно исправил разметку с помощью jQuery. Я еще не пробовал, это целесообразно?

image html jquery css deferred-loading
person Christian    schedule 01.11.2011    source источник
comment
Я также использую возможное решение, но вместо использования атрибута alt я использую атрибут data-src, таким образом, вы все равно можете использовать атрибут alt. Работает очень хорошо, но, конечно, если кто-то отключил javascript, страница не будет работать.   -  person jeffreydev    schedule 01.11.2011
comment
@jeffreydev Они все равно не смогут увидеть страницу. Работает ли data-src со старыми браузерами?   -  person Christian    schedule 01.11.2011
comment
я тестировал его в IE6 и выше, firefox, google chrome и сафари   -  person jeffreydev    schedule 01.11.2011

Ответы (1)


arrow_upward
1
arrow_downward

Ну, как я намекнул в вопросе, возможное решение может быть достигнуто с помощью следующего трюка:

<?php
    // server-side content
    echo str_replace(' src=', ' data-dly="" src="blank.gif" data-src="', $html);
?>

// client-side script
function showPage(id){
    hidePages();

    var page = jQuery('#page'+id);

    page.find('img[data-dly="1"]').each(function(){
        jQuery(this).attr('src',jQuery(this).attr('data-src'));
    }).removeAttr('data-dly').removeAttr('data-src');

    page.fadeIn();
}

NB: Спасибо также за помощь @jeffreydev.

person Christian    schedule 01.11.2011