Изображения для адаптивного / адаптивного Интернета с JS

Question

Я конвертирую сайт для мобильных устройств. Хотите знать, как лучше использовать второй набор изображений для пользователей мобильных устройств, если мой код структурирован следующим образом? Я уже использую медиа-запросы для доставки различных макетов для небольших устройств и хочу доставить второй меньший набор изображений для мобильных пользователей.

            <div class="main_view">
                <div class="window">    
                    <div class="image_reel">
                        <a href=""><img src="pics/1.jpg" alt="" /></a>
                        <a href=""><img src="pics/2.jpg" alt="" /></a>
                    </div>
                </div>
                <div class="paging">
                    <a href="#" rel="1">1</a>
                    <a href="#" rel="2">2</a>
                </div>
            </div>

Этот html ссылается на Javascript, который создает эффект "слайдер изображений", подобный тому, который был предложен здесь. Сайт не должен доставлять очень много изображений. Я бы предпочел не перепроектировать весь сайт, чтобы использовать спрайты CSS и фоновые изображения.

Как лучше всего / наиболее эффективно использовать браузер, чтобы я мог доставить еще один набор изображений пользователям только на мобильных устройствах? Примеры приветствуются.

Спасибо.

Answer 1

Один из способов сделать это - поместить все ваши ссылки на изображения в CSS и использовать медиазапросы для другого набора правил CSS, которые определяют изображения меньшего размера. Вы можете поместить все свои изображения в CSS следующим образом:

<a href=""><img id="img1" src="blank.gif" height="400" width="600"></a>

blank.gif - прозрачный GIF размером 1x1 пиксель (полностью невидимый), масштабируемый до высоты / ширины в теге изображения. Он очень маленький и легко кэшируется браузером.

Затем, на вашем обычном экране CSS, у вас есть это:

#img1 {background: transparent url(pics/1.jpg) no-repeat;}

Тогда в вашем маленьком экране CSS, заданном медиа-запросом, у вас есть это:

#img1 {background: transparent url(pics/1-small.jpg) no-repeat;}

Одним значительным преимуществом использования этого механизма CSS является то, что вам не нужно загружать один набор больших изображений, а затем заменить их на меньшие изображения. Поскольку браузер сталкивается с таблицей стилей CSS медиазапроса для небольшого устройства, прежде чем анализирует HTML, он загружает только небольшие изображения. Любое решение на основе javascript должно ждать загрузки DOM, прежде чем оно сможет "исправить" правильные изображения.

Answer 2

Вы можете использовать пользовательский атрибут в ваших тегах изображений, указав изображение, используемое для не мобильных устройств, чем вы можете изменить src приписать это значение, если пользовательский агент не является мобильным устройством. Вы можете сделать что-то вроде этого (псевдокод):

 $(document).ready(function() {
     if(!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       $('.mobile').each(function() {
          $(this).attr('src',$(this).attr('high-res-img'));
       });
     }
 });

 <img class="mobile" src="images/your-mobile-image.jpg" high-res-img="images/mobile-image.jpg" alt="" />

Answer 3

Другой вариант (если включен javascript, который, вероятно, используется слайдером), чтобы проверить мобильность с помощью js, а затем заменить html-код для слайдера на дружественный для мобильных устройств html-код перед запуском скрипта-слайдера. / инициализирует.