Адаптивный дизайн - Media Queries - Как не загружать определенные изображения - PullRequest
Новая
       18

Адаптивный дизайн - Media Queries - Как не загружать определенные изображения

7 голосов
/ 12 сентября 2011

Хорошо, поэтому я разработал адаптивный макет, который не показывает изображения для экранов очень маленьких размеров, используя медиа-запросы и display: none;.

Пока все хорошо. Но эти изображения по-прежнему загружаются на эти устройства, что приводит к увеличению пропускной способности.

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

Любой ответ будет очень признателен!

Ответы [ 4 ]

3 голосов
/ 12 сентября 2011

Два варианта, которые я могу придумать:

  1. Обнаружение небольших устройств на сервере с использованием сниффера в браузере и отправка им другого HTML-кода, который не ссылается на изображения.
  2. Отображение изображений с помощью CSS вместо HTML (в атрибутах style, если хотите), используя background-image или :before / :after и content (не поддерживается IE 6 или 7) и оберните этот CSS-код в медиазапросы, чтобы он отображался только на устройствах с большими экранами.
2 голосов
/ 08 июля 2013

Единственное доступное решение сейчас - это обернуть изображение тегами <noscript>, а затем вытащить изображение позже с помощью javascript. Файлы cookie не работают ни при первой загрузке страницы (HTMLPreloadScanner), ни приCDNs.Обнюхивание в браузере бесполезно, если ваши изображения не всегда составляют 100% области просмотра.

Slimmage.js реализует контекстно-зависимые адаптивные изображения в 3 КБ ванильного JS .

Разметка также довольно проста: 

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

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

0 голосов
/ 12 августа 2012

Если у вас нет проблем с использованием дополнительного JavaScript, вы можете попробовать THIS . Я наткнулся на него во время поиска и изучения медиазапросов.

0 голосов
/ 06 октября 2011

Если вы не возражаете против зависимости JavaScript, вы можете проверить window.innerWidth и вставить теги изображений для достаточно больших экранов.

Изображения будут запрашиваться только в том случае, если включен JavaScript иокно достаточно большое.

...