Блог

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

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

#jquery #html #css #image #deferred-loading

#jquery #HTML #css #изображение #отложенная загрузка

Вопрос:

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

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

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

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

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

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

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

Комментарии:

1. Я также использую возможное решение, но вместо использования атрибута alt я использую атрибут data-src, таким образом, вы все равно можете использовать атрибут alt. Работает очень хорошо, но, конечно, если кто-то отключил javascript, это приведет к сбою страницы.

2. @jeffreydev Они все равно не смогли бы увидеть эту страницу. data-src Работает ли со старыми браузерами?

3. я протестировал его в IE6 и выше, firefox, Google Chrome и Safari

Ответ №1:

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

 <?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 за помощь.

Метки: