Загрузка изображений по запросу (или; отключить загрузку скрытых изображений) - PullRequest
Новая
       18

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

1 голос
/ 01 ноября 2011

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

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

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

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

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

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

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

1 Ответ

1 голос
/ 01 ноября 2011

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

<?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();
}

Примечание: спасибо @ jeffreydev за помощь.

...