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

Я не хочу устанавливать их в display:none; со средствами массовой информации, потому что они все равно будут загружаться. Есть ли способ загрузить их, только если ширина устройства превышает 500 пикселей?Как предотвратить загрузку изображений с устройств определенной ширины?

источник

2012-01-03 la_f0ka

Вы можете загрузить их все после того, как страницы, сам загруженным с помощью JavaScript, и игнорировать некоторые изображения, если window.innerWidth меньше 500.

Специфика реализации будет определяться вашим собственным приложением, но я бы рекомендовал что-то вроде следующего:

Заменить все изображения с заполнителями и дать те, которые вы хотите скрыть определенный класс:

<img src="placeholder.png" class="gt500" data-source="realimage.png">

вы могли бы сделать что-то вроде (assumin г JQuery):

$(document).ready(function(){ 
    if(window.innerWidth > 500) { return; } 
    $('img.gt500').each(function() { 
     $(this).attr('src', $(this).data('source')); 
    }); 
});

Что поменяет все заполнители для реальных изображений, но только если окно достаточно широк.

источник

2012-01-03 12:45:00 beeglebug

Хммм ... То же, что мое предложение, но с данными.Вы можете выбрать только изображения с атрибутами источника данных, а не полагаться на класс? –

AFAIK не имеет встроенного селектора атрибутов данных, что означает, что вам нужно будет проходить через все изображения в DOM и отклонять их с помощью проверки внутри цикла. Это потребует меньшей разметки, но будет немного медленнее выполнять, так что, как вы предпочитаете, я полагаю. – beeglebug

Эй! жаль, что я не ответил раньше, но поскольку я использую Wordpress для этого, мне пришлось перезаписать некоторые функции мультимедиа, чтобы вставить источник данных в мои миниатюры. Кроме того, вместо '$ (this) .src = $ (this) .data ('source');' мне приходилось делать это в двух строках: 'var img_src = $ (this) .data ('source'); $ (this) .attr ('src', img_src); 'В любом случае, спасибо за помощь @beeglebug! –

Вы не можете предотвратить загрузку изображения, кроме как удалить его из DOM или изменить его src. Даже тогда он уже начнет загрузку, поэтому, если он загрузится полностью, будет зависеть от того, как браузер его реализует, и я не знаю ответа на это.

Все, что я могу предложить, что вы префиксом все Суданский Красный Полумесяц изображение с #, то сделать что-то вроде этого:

var imgs = document.querySelectorAll('img[src^="#"]'); 
for (var i = 0; i < imgs.length; i++) { 
    imgs[i].setAttribute('src', imgs[i].getAttribute('src').substr(0)); 
}

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

источник

2012-01-03 12:53:38

Вы можете получить сломанные изображения на странице с помощью этой техники, хотя только на время, которое требуется для запуска скрипта. – beeglebug

Я бы, вероятно, сделал это на стороне сервера. WURFL - это база данных, которая часто используется для обнюхивания мобильных устройств, примером PHP является here. В настольном браузере веб-разработки и устройствах нюхание считается очень плохой практикой. Для мобильных устройств из-за большого количества устройств и их различных возможностей это часто является необходимостью. Я полагаю, что WURFL тестирует серверную часть пользовательского агента (среди прочего) для обнаружения устройства и затем возвращает кучу информации о нем (включая разрешение экрана), после чего вы можете использовать изображения разных размеров на основе этой информации.

Я не думаю, что есть способ чистого предотвращения загрузки изображения на интерфейсе. Вы можете пропустить все изображения с помощью javascript при загрузке документа и установить атрибут src в пустую строку, если их ширина больше 500 пикселей. Проблема заключается в том, что вам нужно будет убедиться, что все ваши изображения имеют определенные размеры в разметке, и даже тогда некоторые браузеры не будут сообщать ширину, пока изображение не закончит загрузку. Вы также не могли гарантировать, что изображения не начнут загружаться до того, как javascript запишет (а не все мобильные устройства поддерживают js или включили его). Это кажется мне ужасно хамским.

источник

2012-01-03 12:57:10 baseten

Я хотел бы попробовать что-то вроде этого:

<img src="" data="actualimagesource" />

Проверьте каждое изображение, либо на сервере или на стороне клиента: Если ширина сайта позволяет выводимое изображение, вытащить строку из «данных» и место это в атрибуте «src».

Очень похоже на: http://www.appelsiini.net/projects/lazyload

источник

2012-01-03 13:02:00

Решение Beeglebug гораздо более подробно, чем мое, я предлагаю посмотреть его в этой теме. –

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

ответ

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