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>

假设这是一个动态网页，您可以在页面中包含style代码而不是css文件中的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。这会执行像check这样的媒体查询并返回一个布尔值。

如果访问者有移动设备，请阻止来自网站的加载图片...意见？

1 个答案:

CSS

HTML5

的Javascript