更換圖片代碼當屏幕分辨率更改

Question

我有一個形象的，像這樣：

<img src="https://preview.ibb.co/drSmLQ/background_full.jpg" /> 

我需要在頁面的大小而變化，它與另一張照片代替，我想要的！

我該如何在「JAVA SCRIPT」中做到這一點？

Answer 1

歡迎堆棧溢出Arash EB :)

看來想要當browser window調整爲切換到另一個圖像。

要做到這一點 - 當窗口大小改變/調整大小時，您需要知道。

你不能知道，預先，因爲它取決於用戶交互。用戶可能決定現在調整它的大小，或稍後調整大小 - 不知道，當將會發生時，您無法預測..

要解決此問題 - 我們有events。

我假設你不完全瞭解JavaScript events是如何工作的。這個想法是，你給的指令到瀏覽器：

Hey browser, when x happens, run y :

x是事件名稱/動作你有興趣，

和y是要運行的代碼。 y有時被稱爲eventHandler/eventListener - 它不是什麼幻想，只是一個功能。 - 你會看到下面。 （事件監聽器比normal code that executes top-to-bottom不同，則可以在以後運行 - >當用戶決定執行該操作。）

在JavaScript中任何事情都有特定的事件：單擊（click），調整（resize），移動鼠標（mousemove），拖動（drag），等等 - 有數百人，併爲您的瀏覽器都已經實現了。 See a list of events here

每個事件都與頁面上的對象/元素相關聯。因此，當您想知道特定元素何時執行此操作時，您需要對該對象執行registera piece of code to run/eventListener/eventHandler。當動作/事件發生在該對象上時 - 已註冊的代碼將運行。所有這些都自動發生。

此事件的想法是JavaScript的的心臟，有些需要解決這種類型的相互作用問題時，有高水平的畫面..

在特定情況下，你需要一個eventListener附加到window object 。

（window是global object像document。window包含與當前瀏覽器窗口中的所有信息。）

let myImage = document.getElementByTagName('img'); // get a reference to your image, use getElementById if ByTag creates collisions. 


// hey browser! when window is resized (x), run resizeListener (y), get's expressed like this: 

window.addEventListener('resize', resizeListener); // register an eventListener==eventHandler. 

function resizeListener (resizeEvent) { 
    // resizeEvent is an object containing some data about resizing, is given to you by the browser. 
    // You need to understand *callbacks* to get how resizeEvent ended up in here - but that is for another discussion, and you don't necessarily need it. 

    // place some conditional logic in here, to get the behavior you want. 
    myImage.src = "./pathToImage/yourNewImage.jpg"; 


} 

Answer 2

隨着onresize事件你發現任何頁面大小的變化，我建議你在更改照片之前驗證一些寬度或高度，如果你不做這個驗證，任何尺寸的變化都會改變照片，我認爲這不是你想。

window.onresize = function(event) { 
    if(window.innerWidth < ?){ 
     document.getElementById("youimageid").src="../newImage.png"; 
    } 
}; 

Answer 3

，如果你想改變即視網膜上，你可以使用這個庫http://imulus.github.io/retinajs/

您也可以在resize事件添加事件處理程序用於獲取寬度資產和比IF或交換機內評估。

$(window).on('resize', function() { 
    // Get the width from body element instead of window.width for cross browser compatibility (Scrollbar) 
    var $viewportWidth = $('body').width(); 
}); 

if($viewportWidth > 1200) { 
    $('img').attr('src', 'path/to/image.png') 
} esle { 
    $('img').attr('src', 'path/to/image-2.png') 
}