更改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）

回答

相關問題