Остановить загрузку изображения на смартфоне

Я разрабатываю адаптивный веб-сайт для компании, в которой полноразмерный веб-сайт имеет слайд-шоу с изображениями в фоновом режиме (полностью заполняя экран Backstretch). Поскольку изображения имеют довольно большой размер (около 300 КБ), я ищу способ предотвратить загрузку изображений при просмотре сайта на смартфоне.

Я подал заявку display: none а также visibility: hidden на backstretch div с медиа-запросом. Это скрывает изображения, но кажется, что они все еще загружаются. Есть ли умный способ заставить браузер полностью их игнорировать?

Источник

3 ответа

Решение

Если вы устанавливаете изображение с помощью CSS, есть способ.

Если вы установите div для отображения: none, он все равно будет загружаться, однако, если вы установите родительский div для отображения none, он не будет загружаться до тех пор, пока не сработает медиа-запрос для установки.

CSS

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

HTML

<div class="parent">
   <div class="background"></div>
</div>

Наконечник шляпы Тиму Кадлецу - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Источник

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

Нечто похожее на следующее предотвратит загрузку изображения на мобильное устройство, а также избавит от необходимости ненужной обертки div:)

HTML:

<div class="container">
    <!-- slideshow container -->
</div>

CSS:

/* default to no background image */
.container {
    background-image: none; 
}

/* add it in for wider screens */
@media screen and (min-width: 500px) {
    .container {
        background-image: url(myimage.png);
    }
}
Источник

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

Источник
Другие вопросы по тегам