Javascript 根据屏幕大小加载图像

我有以下显示图像的HTML代码：

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

然后在我的身体里，我添加了以下代码：

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";
}

var w=window，
d=文件，
e=d.documentElement，
g=d.getElementsByTagName（'body'）[0]，
x=w.innerWidth | | e.clientWidth | | g.clientWidth，
y=w.内部高度| | e.倾斜度| | g.倾斜度；
如果（x这是一个有趣的、持续的问题。没有一个正确的方法，但这里有一些选择：




如果您需要支持不支持媒体查询的浏览器，我建议先使用CSS媒体查询，然后使用JavaScript。此示例在更改图像之前使用850px作为最大宽度

CSS:

JS/JQuery：

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

HTML:

其他人提出了解决多个映像问题的替代方法，但在您提出的解决方案中，问题是您试图在DOM准备就绪之前为映像提供src。请确保所有内容都已使用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";
    }
};

var w=window，
d=文件，
e=d.documentElement，
g=d.getElementsByTagName（'body'）[0]，
x=w.innerWidth | | e.clientWidth | | g.clientWidth，
y=w.内部高度| | e.倾斜度| | g.倾斜度；
//加载：
window.onload=函数（）{
如果（x使用媒体查询缩小图像并显示背景图像

注意：此方法要求您知道替换图像的大小/比例


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

@media screen and (max-width:568px) {
  #wm01 {
    background: url("theImages/wm01_app.jpg") no-repeat 0 0;
    height: 0;
    width: 0;
    padding-bottom: 300px; /* replace with height of wm01_app.jpg */
    padding-right: 300px; /* replace with width of wm01_app.jpg */
  }
}


@媒体屏幕和屏幕（最大宽度：568px）{
#wm01{
背景：url（“theImages/wm01_app.jpg”）不重复0；
身高：0；
宽度：0；
填充底部：300px；/*替换为wm01_app.jpg的高度*/
右侧填充：300px；/*替换为wm01_app.jpg的宽度*/
}
}
还没有人建议使用元素

有一个很好的功能，可以为不同的窗口大小指定不同的图像

例如：

<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>



也就是说，当设备的宽度至少为568px时，使用
图像/wm01_app.jpg
。否则使用默认的
源代码。
我在我的网站上使用此代码做同样的事情，对我来说非常适合

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'/>")
    }
});

$（文档）.ready（函数（）{
var w=窗内宽度；
如果（w 650&&w为什么不使用
srcset
和
size
属性

更多参考，尽管

它受
支持，为什么不使用媒体查询？我不能使用css设置图像源…对吗？为什么不使用背景图像？它是滑块脚本的一部分，这就是为什么我不能使用背景图像的原因：/yeah，我想知道@Derek SIt也在更改背景，但我使用的是一个图像，你可以在d而不是图像，图像将来自您的CSS定义#wm01I将向上投票，因为这可能是一个选项，但图像是滑块的一部分，需要使用图像标记。我添加了一个使用DIV或图像的示例。两者都可以。很高兴我可以帮助您。在大多数情况下，您可以删除图像源并在CSS中定义它相反。你需要在CSS中指定宽度和高度，以使图像以正确的尺寸显示。图片并非在所有浏览器上都可用。我使用了这个polyfill，它对我来说效果很好-显然IE不支持它。@JimmyAdaro是的，这就是为什么我在描述中添加
caniuse
链接。链接不是答案。
<picture>
    <source srcset="theImages/wm01_app.jpg" media="(min-width: 568px)">
    <img src="theImages/wm01.jpg" alt="PP">
</picture>

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

$(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'/>")
    }
});

<img srcset="tiger-320w.jpg 320w,
             tiger-480w.jpg 480w,
             tiger-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="tiger-800w.jpg" alt="Bengal tiger">