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

Prevent load images from the site if the visitor has a mobile device... Opinions?

本文关键字：站点 加载 意见 图像 访问者 移动 如果      更新时间：2023-09-26

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

对不起，英语不好。

更新：阻止加载图像

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

一个只有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脚本，如果浏览器不支持该功能，则可以找到这些脚本来实现该功能。

爪哇语

这种方法对我来说是最笨拙的，但这只是我的意见。它具有非常大的浏览器覆盖范围，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。这将执行类似检查的媒体查询并返回布尔值。

相关文章：