更改img src以响应媒体查询（CSS或Javascript）

我想更改图片的src以响应媒体查询，其中max-width为515 px。如果javascript有一个与CSS媒体查询类似的事件，或者类似的事情，我可以实现JavaScript或jQuery（也可能是AngularJS）。更改img src以响应媒体查询（CSS或Javascript）

我想要3（好现在2）单独图像的原因是减少文件的大小，例如在移动设备上，我可以加载一个50 KB的照片，而不是700 KB的照片。

如果任何代码或其他信息需要评论，我将它添加

注：This answer的问题How to use a lower resolution image for mobile解决了使用HTML5像素同一类型的问题（而不是CSS或jQuery的'媒体查询“），这也是一个很好的解决方案。

来源

2015-08-24 Cheetaiean

的可能重复的[如何使用一个较低分辨率图像的移动？]（http://stackoverflow.com/questions/32161026/how-使用较低分辨率的图像为手机） –

顺便说一下，这可以使用纯JS5 polyfill用于旧版浏览器。在链接重复线程中查看我的答案。 –

谢谢你是一个很好的解决方案，但不要以为我想使用polyfill。从2006年开始，它对所有浏览器都有效吗？或者我可以使用旧版浏览器的jQuery方法。 – Cheetaiean

一种方法是你可以使用JavaScript

$(document).ready(function() { 
    if($(window).width() > 515) { 
     $("#img").attr("src", "large.png"); 
    } else { 
     $("#img").attr("src", "small.png"); 
    } 
});

对于移动，你需要检查的方向变化时的宽度以及检查窗口宽度并设置图片src。

如果你不想要img标签，你可以有背景图片。可以在CSS媒体查询中处理背景图像。

来源

2015-08-24 23:08:42 kiranvj

我在想这样的事情。但是当我尝试这个时，它不起作用。我会分享我的代码。 – Cheetaiean

将其添加到文档准备就绪。 – kiranvj

它的工作原理！新手错误，你可以说xD（我甚至有其他工作jQuery下document.ready） – Cheetaiean

我建议如下：

<img src="" data-mobile="mobile-version-url" data-desktop="desktop-version-url" />

，然后通过javascript/jQuery检查窗口的宽度和设置图像的src ATTR。

这是jQuery代码的一个例子..

$(document).ready(function() { 
    var device = $(window).innerWidth() > 515 ? "desktop" : "mobile"; 
    $("img").each(function() { 
     $(this).attr("src", $(this).data(device)); 
    }); 
});

来源

2015-08-24 23:09:01

更改img src以响应媒体查询（CSS或Javascript）

回答

相关问题