根據視口寬度更改圖像源

<script type="text/javascript"> 
    $(window).resize(function(){ 
    var width = $(window).width(); 

    if (width < 361) { 
     $(".infograph-image").attr("src","/images/infographicHowMobile.png"); 
    } 
}); 
</script>

我希望根據視口寬度大小更改給定圖像的圖像源。如果視口寬度大小爲360或更小，請更改爲圖像的移動版本。根據視口寬度更改圖像源

我有兩個簡單的問題：

1）我們怎樣才能做到既：1）檢測窗口大小調整和文件準備好了？

這一點，我相信我：

我需要改變成一個功能。然後在加載時調用它;

checkResponsive();

然後綁定一個事件偵聽器：

$(window).resize(checkResponsive);

2）我們需要有一個移動版本的多個圖像，這應該轉化爲功能？或者幾個ifs可能工作？

請你給我一個啓動這兩個問題的開始請。

來源

2012-10-08 MEM

你試過$（window）.resize（）或者css媒體查詢嗎？ – prashanth

@prashanth：window.resize是我發佈的代碼示例。媒體查詢，有沒有辦法使用媒體查詢來更改img src？ – MEM

請參閱http://stackoverflow.com/q/2676436/441860 – prashanth

創建一個單獨的函數並在兩個事件中調用它們。因此，例如，創建功能mobileImg（）這樣的：

function mobileImg(targetClass, imageSrc) { 
    var width = window.innerWidth; // No need for jQuery here, raw JS can do this 

    if(width < 361) { 
     $(targetClass).attr("src", imageSrc); 
    } 
}

然後再調用這個兩個事件。

$(document).ready(mobileImg(".infograph-image", "/images/infographicHowMobile.png")); 
$(window).resize(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));

然後，您可以調用mobileImg方法，只要你想盡可能多的與任何PARAMS。如果你真的想把它弄乾淨，還需要檢查傳遞的元素和圖像是否存在，並在需要時使用回退。

來源

2012-10-08 15:30:03 Oldskool

我沒有得到這個。如果我有infographicHowMobile和信息圖關於移動和信息圖其他圖像移動和信息圖是另一個圖像移動，我需要撥打8次文件。準備和window.resize？：s – MEM

@MEM不，你可以在1個電話中堆疊它們。例如：'$（document）.ready（mobileImg（「。class1」，「img1」）; mobileImg（「。class2」，「img2」））;'等等......或者將targetClass/imageSrc作爲數組傳遞給函數和遍歷所有這些。 – Oldskool

@Oldskook - 非常感謝，我最終使用以下非常漂亮的腳本來完成這項工作，就像我希望完成的工作一樣：http://responsejs.com/ – MEM

根據視口寬度更改圖像源

回答

相關問題