Question

我的图像应该在桌面屏幕上看到，但不能在移动设备上看到。我知道CSS媒体查询仅用于显示目的，这意味着在移动设备上，图像仍然会被加载但只是不显示。有没有办法阻止图像在<640px分辨率的设备上加载？

Answer 1

window.onload = function(){
    if(document.body.clientWidth> 600){
        // . . . code . . . 
    }
}

Answer 2

您可以在加载时检查页面的宽度，并根据需要在图像上设置src属性。

＆＃13;

if(window.innerWidth > 600) {
  document.getElementById("img1").src = "//placehold.it/150";
} else {
  alert("No image loaded");
}

＆＃13;

<img id="img1" src="" />

＆＃13;

现在，一个问题可能是它将UI逻辑（即图像的URL）合并到JS中。您可以使用data-src等数据属性来保留实际图片src，并根据src将其动态设置为window.innerWidth，从而避免这种情况。如下所示：

＆＃13;

if(window.innerWidth > 600) {
  var img = document.getElementById("img1");
  img.src = img.attributes["data-src"].value;
} else {
  alert("No image loaded");
}

＆＃13;

<img id="img1" src="" data-src="//placehold.it/150" />

＆＃13;

Answer 3

使用纯CSS，你不能。

您有两种选择：

选项1：HTML5

如果您不需要支持旧浏览器，则可以使用HTML5新标记<picture>。像这样：

<picture>
    <source 
        media="(min-width: 641px)"
        srcset="images/my_desktop_image.png">
    <source 
        media="(min-width: 451px)"
        srcset="images/my_mobile_image.png">
    <img 
        src="images/my_default_image.png" 
        alt="picture text">
</picture>

选项2：Javascript （使用jQuery库可能会更容易）

使用jQuery，您可以检测窗口大小，并根据该负载获得所需的图像：

$(window).resize(function() {
    if($(this).width > 640) {
        // load image..
    }
});

仅为具有＆gt;的设备加载图像640px屏幕

3 个答案: