使用jQuery進行響應式圖像替換而無瀏覽器嗅探

我一直在研究響應式圖像替換技術，它們都有優點/缺點。有一件事似乎很常見，但它們都使用瀏覽器嗅探來選擇性地設置適當的圖像大小。使用jQuery進行響應式圖像替換而無瀏覽器嗅探

它目前可以創建一個媒體查詢語句，該語句可以在頁面上定位一個「已知」給定圖像（比如說wordpress「精選圖像」），以取代每個設備寬度斷點處的較低分辨率圖像。

例如，如果我們有這個標記爲給定頁面」的特色形象

<figure class="figureFeatured"> 
    <img src="myimage-300x300.jpg" /> 
</figure>

有了這樣的標記，如果圖像名稱不會改變，下面的媒體查詢將做的工作，而不需要任何額外的腳本，使用純CSS。

@media only screen and (max-device-width:480px) 
{ 
    figure.figureFeatured img{content:url(myimage-50x50.png)}"; 
}

的問題，並在那裏我希望jQuery的幫助，是當你事先不知道這個形象的名字。你需要使用DOM發現然後可能使用正則表達式來指定替換圖像

例如，我的示例中的圖像是「myimage-300x300.jpg」，但它可以是帶-WidthxHeight.jpg擴展名的任何文件名。

來源

2013-05-01 RegEdit

你沒有對象的圖像，你的目標容器中。 – Ohgodwhy 2013-05-01 14:43:03

圖像是通過CSS媒體查詢 – RegEdit 2013-05-01 14:51:53

你不能只是做以下？：

HTML

<div class="image"></div>

CSS

.image { 
    background: url("image1") no-repeat scroll 1px 1px #FFFFFF; 
} 

@media only screen and (max-device-width:480px) 
{ 
.image { 
    background: url("image2") no-repeat scroll 1px 1px #FFFFFF; 
} 
}

來源

2013-05-01 14:45:58

當然，但是如果image1成爲image3，如果你不知道名稱，只是在DOM。你不會提前知道文件名。你必須以某種方式用jQuery來嗅探它，並將其傳遞給媒體查詢。 – RegEdit 2013-05-01 14:49:33

使用jQuery進行響應式圖像替換而無瀏覽器嗅探

回答

相關問題