手机不加载图片怎么办？答案

【问题标题】：How to not load images on mobile phones?手机不加载图片怎么办？
【发布时间】：2014-10-03 12:16:46
【问题描述】：

我正在寻找使图像（真正的img 元素，没有背景图像属性）不加载到手机上的最佳方法。由于使用媒体查询并将display 设置为none 不会使浏览器停止预加载图像，因此我研究了使用没有JavaScript 的纯CSS/HTML5 的更好方法。我看到的唯一方法是使用 HTML5 picture 元素仅在某些屏幕宽度处加载图像。

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

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

【问题讨论】：

标签： javascript html image css responsive-design

【解决方案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 像素），这样就不会从服务器下载任何内容。
后备（如果浏览器不支持此功能）- 使用良好的旧标签

【讨论】：

【解决方案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();

【讨论】：

第一次加载宽度大于 959px 的页面时，是否会在计算机上触发 resize 事件？
@singe31 不，它没有，我已经编辑了我的答案。现在我手动触发了resize事件，所以分析了if语句。