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

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

0 голосов
/ 20 марта 2012

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

            <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 спрайты и фоновые изображения.

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

Спасибо.

Ответы [ 3 ]

3 голосов
/ 20 марта 2012

Один из способов сделать это - поместить все ваши ссылки на изображения в 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 загрузится, прежде чем оно сможет «исправить» нужные изображения.

1 голос
/ 20 марта 2012

Вы можете использовать пользовательский атрибут в своих тегах изображения, указав изображение, используемое для не мобильных устройств, чем вы можете изменить атрибут 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="" />
0 голосов
/ 20 марта 2012

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

...