如果访问者有移动设备，则阻止从网站加载图像......意见？

Question

我正在使用媒体查询，但不幸的是，在确定用户代理（如 Google、Facebook 和其他网站）方面，它们不如专门针对移动设备的简单“单片”网站版本。 我不想做一个特别的版本，因为我已经将整个网站翻译成媒体查询。最重要的是，这种方法在加载页面的重量方面没有灵活性，这对手机所有者来说至关重要（在我们国家，移动互联网仍然非常昂贵+图像降低性能）。我已经成熟了使用 Javascript 的想法，这将阻止浏览器以特定规则（例如屏幕分辨率）加载图像。 你怎么看——实际上已经实现了，并且可能已经实现了？我知道很多聪明人都访问过这个网站，我真的很想听听您在这方面的宝贵经验！

抱歉英语不好。

更新： Prevent images from loading

Answer 1

这个问题有很多可能的解决方案。我将在下面列出常见的三个。

如果您不关心旧版浏览器，则可以使用纯 CSS 解决方案、javascript 解决方案和 HTML5 解决方案：

CSS

我建议将图像移动到样式标签中并使用媒体查询来显示适当的图像：

<style>
/* mobile first */
.img {
    display:none;
}

/* tablet */
@media (min-width:600px) {
    .img {
        background:url('/path/to/image-tablet.png') no-repeat scroll 0 0 transparent;
    }
}

/* desktop */
@media (min-width:1280px) {
    .img {
        background:url('/path/to/image-large.png') no-repeat scroll 0 0 transparent;
    }
}
</style>

<div class="img"></div>

假设这是一个动态网页，您可以将 css 包含在带有 style 标签的页面中，而不是包含在 css 文件中。

HTML5

如果您不介意完整的浏览器覆盖 (canIuse)，您还可以使用新的 HTML5 picture 元素：

<picture>
  <source 
    media="(min-width: 1280px)"
    srcset="/path/to/image-large.png">
  <source 
    media="(min-width: 600px)"
    srcset="/path/to/image-tablet.png">
  <img src="/path/to/image-mobile.png" /> <!-- a 1x1 empty pixel -->
</picture>

在此示例中，移动浏览器和不支持它的浏览器将加载img 标签。其他浏览器将为媒体查询加载适当的图像。

如果您喜欢这个解决方案，但又希望它在旧版浏览器上运行，您可以找到一些 JS 脚本，如果浏览器不支持它，它们将实现该功能。

Javascript

这种方法对我来说是最笨拙的，但这只是我的看法。它的浏览器覆盖范围非常大，IE 从 10 开始就支持这种方法。

创建一个不带src属性的图片标签，图片大小版本为data属性：

<img data-tablet="/path/to/tablet.png" data-desktop="/path/to/large.png" />

<script>
var $el = jQuery('img');
if(window.matchMedia("(min-width: 600px)").matches) {
    $el.attr('src', $el.data('tablet'));
}
if(window.matchMedia("(min-width: 1280px)").matches) {
    $el.attr('src', $el.data('desktop'));
}
</script>

我使用 jQuery 来演示，但其中重要的部分是 window.matchMedia。这会执行类似检查的媒体查询并返回一个布尔值。