Отзывчивый дизайн - медиа-запросы - как не загружать определенные изображения
-
29-10-2019 - |
Вопрос
OK, поэтому я разработал адаптивный макет, который не показывает изображения для очень маленьких размеров экрана, используя средствами массовой информации и генеракодицетагкод.
так далеко так хорошо.Но эти изображения все еще загружаются на эти устройства, вызывая увеличение пропускной способности.
Какой правильный способ сделать эти изображения не загружать на указанные устройства?
Любой ответ будет высоко оценен!
Решение
На данный момент единственное доступное решение - обернуть изображение тегами <noscript>
, а затем вытащить изображение с помощью javascript. Файлы cookie не работают при загрузке первой страницы (HTMLPreloadScanner) или с CDN.Обнюхивание браузера бесполезно, если ваши изображения не всегда занимают 100% области просмотра.
Slimmage.js реализует контекстно-адаптивные изображения в 3 КБ ванильного JS .
Разметка тоже довольно проста:
родовое словоКонечно, вы можете создать помощник на стороне сервера, чтобы даже абстрагироваться от этого.
Другие советы
Я могу придумать два варианта:
- Обнаружение небольших устройств на сервере с помощью анализа браузера и отправка им другого HTML-кода, который не ссылается на изображения.
- Отображать изображения с помощью CSS вместо HTML (в атрибутах
style
, если хотите), используя либоbackground-image
, либо:before
/:after
иcontent
(не поддерживается IE 6 или 7) и оберните этот код CSS в медиа-запросы, чтобы он отображался только на устройствах с большими экранами.
Если вы не возражаете в зависимости от JavaScript, вы можете проверить window.innerWidth
иВставьте теги изображения для достаточно больших экранов.
Изображения будут запрошены только в том случае, если JavaScript включен, и окно достаточно большое.
Если у вас нет проблем с использованием дополнительного JavaScript, вы можете попробовать Это .Я наткнулся на него во время поиска и изучаю о средствах массовой информации.