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

Question

我正在寻找使图像（真实img元素，无背景图像属性）无法加载到手机上的最佳方法。 由于使用媒体查询和设置display ，以none不需额外使浏览器停止预载的图片，我使用纯CSS / HTML5没有JavaScript的研究更好的方法。 我看到的唯一方法是使用 HTML5 picture元素仅以特定屏幕宽度加载图像。

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

但是目前主流浏览器还不支持图片元素，所以这也不是一个解决方案。 你有其他想法如何实现它吗？ 如果没有纯 CSS/HTML 方法，使用 JavaScript 的最佳方法是什么？

Answer 1

对于任何寻求更现代方法的人（截至 2019 年）：

 <picture> <source media="(min-width: 1000px)" srcset="***url of image***"> <source media="(max-width: 999px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%"> <img src="***url of image***" alt="***Image alt***"> </picture>

• 如果浏览器的宽度大于 1000px 则显示图片的 url
• 如果浏览器的宽度小于 1000 像素，则显示以 base64 数据表示的图像（大小可以仅为 1 像素），这样就不会从服务器下载任何内容。
• 回退（如果浏览器不支持） - 使用旧标签

Answer 2

在您的情况下，从移动优先方法开始可能会更好。 首先不加载任何图像，然后在满足某些要求时使用 JavaScript 添加图像。 例如像这样使用 jQuery：

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

如果您想让它具有响应性/动态性：

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