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

У меня есть следующий код HTML, который отображает изображение:

<div>
     <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" />
</div>

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

#wm01 {
    display: none;
}

И затем в моем BODY я добавлю следующий код:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
if (x<568) {
    //alert(x);
    document.getElementById("wm01").src="theImages/wm01_app.jpg";
    document.getElementById("wm01").style.display = "block";
}
else {
    document.getElementById("wm01").src="theImages/wm01.jpg";
    document.getElementById("wm01").style.display = "block";
}

Изображение не отображается на экране любого размера. Как я могу это исправить?

javascript,html,css,

6

Ответов: 6

6

Это интересная, продолжающаяся проблема. Существует не один правильный путь, но вот несколько вариантов:

  • http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/
  • http://css-tricks.com/which-responsive-images-solution-should-you-use/
6

Никто еще не предложил использовать <picture>элемент.

<picture> имеет приятную функцию, позволяющую указать разные изображения для разных размеров окна.

Например:

<picture>
    <source srcset="some-bigger.png" media="(min-width: 500px)">
    <img src="some.png" alt="Some picture">
</picture>

Для вас это будет:

<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

Который говорит, использовать theImages/wm01_app.jpgвсякий раз , когда ширина устройства, как минимум, 568px. В противном случае используйте <img>источник по умолчанию .

5 ов

Сначала я предложил бы запрос CSS media, а затем JavaScript, если вам нужно поддерживать браузер, который не поддерживает медиа-запрос. Этот пример использует 850px как максимальную ширину перед изменением изображения.

CSS:

/* media query device layout transformation for 850px width trigger */
#wm01 { 
     background:url(images/large_image.png);
     width:100px;
     height:50px;
}
@media screen and (max-width:850px) {
     #wm01 {
         background:url(images/smaller_image.png);
     }
}

JS / JQuery:

var width = $(window).width();
if (width >= 850) {
    $('#wm01').addClass('largeImageClass');
} else {
    $('#wm01').addClass('smallImageClass');
}

HTML:

<div id="wm01" alt="PP" title="PP" u="image" /><!--comment for legacy browser --></div>
<img id="wm01" alt="PP" title="PP" u="image" />
4

Другие предложили альтернативные методы для решения проблемы нескольких изображений, но с вашим предлагаемым решением проблема заключается в том, что вы пытаетесь предоставить изображение src перед тем, как DOM будет готов. Убедитесь, что все загружено с помощью window.onload, и оно будет работать. Измените свой код на:

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;

// The onload:
window.onload = function(){
    if (x<568) {
        document.getElementById("wm01").src="theImages/wm01_app.jpg";
        document.getElementById("wm01").style.display = "block";
    }
    else {
        document.getElementById("wm01").src="theImages/wm01.jpg";
        document.getElementById("wm01").style.display = "block";
    }
};
1

Я делаю то же самое на своем веб-сайте, используя этот код, и отлично подходит для меня.

HTML

<figure class="picture"></figure>

JAVASCRIPT / JQUERY

$(document).ready(function(){
    var w = window.innerWidth;
    if(w <= 650){
      $(".picture").html("<img src='images-min.jpg'/>")
    }
    else if(w>650 && w<=1300){
      $(".picyure").html("<img src='images-med.jpg'/>")
    }
    else{
      $(".picture").html("<img src='images-big.jpg'/>")
    }
});

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

JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика