根据浏览器宽度加载图片

Question

这是我的代码：

<img class="abc" src="abc.jpg"/>
<img class="xyz" src="xyz.jpg"/>
<script>
  if (window.innerWidth > 500)
    {
        $(".abc").remove();
    }
    else 
    {
        $(".xyz").remove();
    }
</script>

但我认为它只隐藏了图像。因为网络选项卡显示的页面大小总计为两个图像的大小。

Answer 1

css解决方案

你不需要js来实现它，你可以使用css媒体查询来做到这一点，如下所示。

img.abc {display:block;}
img.xyz {display:none;}

@media (min-width:500px) {
  img.abc {display:none;}
  img.xyz {display:block;}
}

<img class="abc" src="abc.jpg" alt="abc"/>
<img class="xyz" src="xyz.jpg" alt="xyz"/>

让JS停止加载两个图像

浏览器将加载任何设置了src属性的图片，因此您要做的是在标记中使用data-src并使用JavaScript将src属性设置为下面：

var abc = $(".abc").data("src"),
   abc_alt = $(".abc").data("alt"),
   xyz = $(".xyz").data("src"),
   xyz_alt = $(".xyz").data("alt");

if (window.innerWidth > 500) {
    $(".xyz").attr("src",xyz);
    $(".xyz").attr("alt",xyz_alt);
} else {
    $(".abc").attr("src",abc);
    $(".abc").attr("alt",abc_alt);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="abc" data-src="abc.jpg" data-alt="abc">
<img class="xyz" data-src="xyz.jpg" data-alt="xyz">

Answer 2

只有完成此主题，您还可以尝试HTML picture标记。

<picture class="abcxyz">
     <source srcset="abc.jpg" media="(max-width: 499px)">
     <img src="xyz.jpg" alt="xyz">
</picture>

但要小心。 IE不支持此解决方案。

有关更多信息，请参阅MDN。

更新

如果您需要为该图片元素添加类，您可以这样做：

<style>
    .abcxyz {
        outline:2px solid lightblue;
    }

    @media (min-width:500px) {
        .abcxyz {
            outline:2px solid black;
        }
    }
</style>

Answer 3

使用此代码：

＆＃13;

＆＃13;

if (window.innerWidth > 500)
{
    $(".abc").attr("src", "abc.jpg");
}
    
else 
{
    $(".abc").attr("src", "xyz.jpg");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<img class="abc" src=""/>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果你想使用JS，试试这个

<img class="abc" src="abc.jpg" style="display:none;"/>
<img class="xyz" src="xyz.jpg" style="display:none;"/>
<script>
    if (window.innerWidth > 500){
        $(".abc").hide();
        $(".xyz").show();
    } else {
        $(".abc").show();
        $(".xyz").hide();
    }
</script>