Javascript 如何不在手机上加载图像？

我正在寻找使图像（real

img

元素，无背景图像属性）不加载到手机上的最佳方法。由于使用媒体查询并将

display

设置为

none

不会使浏览器停止预加载图像，因此我研究了在不使用JavaScript的情况下使用纯CSS/HTML5的更好方法。我看到的唯一方法是使用HTML5

picture

元素来加载特定屏幕宽度的图像

<picture>
   <source media="(min-width: 480px)" src="some.png">
</picture>

---

然而，主要浏览器还不支持picture元素，因此这也不是一个解决方案。你对如何完成这件事还有什么想法吗？如果没有纯CSS/HTML方法，那么使用JavaScript的最佳方法是什么？

在您的案例中，最好从移动优先的方法开始。首先不加载任何图像，然后使用JavaScript添加图像（如果满足某些要求）。例如，与jQuery类似：

if ($(window).width() > 959) {
    $("body").append("<img/>");
}

if（$（窗口）.width（）>959）{
$（“正文”）。追加（“）；
}否则{
$（“.responsive image”）.remove（）；
}
}).resize（）；

对于寻求更现代方法的人（从2019年起）：

当您首次加载宽度大于959px的页面时，计算机上是否会触发调整大小事件？@single31否，我已编辑了答案。现在，我手动触发调整大小事件，以便分析if语句。

$(window).resize(function() {
    if ($(window).width() > 959) {
        $("body").append('<img src="path/to/img.jpg" class="responsive-image"/>');
    } else {
        $(".responsive-image").remove();
    }
}).resize();