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

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

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

источник

2012-04-30 Anders Norén

Если вы устанавливаете изображение через CSS, тогда есть способ.

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

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>

Hat наконечник Тима Кадлец - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

источник

2012-05-01 10:14:28 justinavery

Точно, что я искал, спасибо! –

Это все еще загружает изображения. Правильно? – praaveen

@praaveen только после срабатывания медиа-запроса (поскольку родительский элемент контейнера изображения не установлен) – justinavery

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

источник

2012-04-30 19:12:01

Плагин Backstretch jQuery, который я использую для отображения фоновых изображений, помещает изображения в div прямо над тегом закрывающего тела. Я попытался использовать размер фона, чтобы масштабировать фон, но это мощный hog в Google Chrome (и не поддерживается в старых браузерах). Я загрузил страницу [здесь] (http://www.andersnoren.se/private/272/uppdrag/rbj/). Есть ли способ сделать это, не снимая Backstretch? –

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

что-то вроде следующего будет препятствовать загрузки изображения на мобильном устройстве, а также устраняет необходимость ненужной обертки 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); 
    } 
}

источник

2012-07-06 05:09:46 okyanet

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

ответ

Смежные вопросы