javascript - 手机不加载图片怎么办？

Question

我正在寻找使图像(真正的 img 元素，没有 background-image 属性)不在手机上加载的最佳方法。由于使用媒体查询并将 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>

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