Отзывчивый дизайн - медиа-запросы - как не загружать определенные изображения

Question

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

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

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

Любой ответ будет высоко оценен!

Answer 1

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

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

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

родовое слово

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

Answer 2

Я могу придумать два варианта:

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

Answer 3

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

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

Answer 4

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