Javascript 如果访问者有移动设备，则阻止从站点加载图像。。。意见？_Javascript_Iphone_Mobile_User Agent

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

javascript iphone mobile

Javascript 如果访问者有移动设备，则阻止从站点加载图像。。。意见？,javascript,iphone,mobile,user-agent,Javascript,Iphone,Mobile,User Agent,我使用的是媒体查询，但不幸的是，在确定用户代理（如谷歌、Facebook和其他网站）时，它们不如专门针对移动设备的简单“整体”版本的网站。我不想做一个特别的版本，因为我已经把整个网站翻译成了媒体查询。归根结底，这种方法在重量加载页面方面不具有灵活性，这对于手机用户来说至关重要（在我国，移动互联网价格仍然很高+图像降低了性能）。我已经成熟了使用Javascript的想法，这将阻止浏览器以特定规则（例如屏幕分辨率）加载图像。你认为什么-实际上已经实现，并且可能已经实现了？我知道该网站有很多聪明的

我使用的是媒体查询，但不幸的是，在确定用户代理（如谷歌、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>

在本例中，移动浏览器和不支持它的浏览器将加载

img

标记。其他浏览器将为媒体查询加载相应的图像

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

Javascript 这种方法让我觉得最讨厌，但这只是我的观点。它有一个非常大的浏览器覆盖范围，IE从10年开始就支持这种方法

创建一个不带

src

属性的图像标记，图像大小版本为

数据

属性：

<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进行了演示，但其中重要的部分是

窗口。matchMedia

。这会执行一个类似于check的媒体查询，并返回一个布尔值。