javascript - 仅为屏幕大于 640 像素的设备加载图像

Question

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

Answer 1

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

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

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

现在，一个问题可能是这会将 UI 逻辑(即图像的 URL)合并到 JS 中。您可以通过使用诸如 data-src 的数据属性来避免这种情况，以保留实际图像 src 并将其动态设置为 src 基于 window.innerWidth。类似于以下内容:

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

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