屏幕分辨率更改时替换图像标签

Question

我有一张图片，像这样：

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

当页面大小改变时，我需要用我想要的另一张照片代替！

如何在“ JAVA SCRIPT”中执行此操作？

Answer 1

使用onresize事件，您可以检测到页面大小的任何变化，建议您在更改照片之前先验证一下宽度或高度，如果不执行此验证，则任何大小上的更改都会改变照片，我认为这不是您想要的。

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

Answer 2

如果您想更改视网膜的资产，则可以使用此库http://imulus.github.io/retinajs/

您还可以在resize事件上添加事件处理程序以获取宽度，然后在if或switch中求值。

$(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')
}

Answer 3

欢迎使用Stack Overflow Arash EB :)

调整browser window大小时，您似乎想切换到另一张图像。

为此，您需要知道何时更改/调整窗口大小 。

您可能无法预知 ，因为它取决于用户交互。 用户可能会决定现在调整大小，或者稍后再调整大小-您不知道，您无法预测何时会发生。

为了解决这个问题，我们发生了一些events 。

我假设您不完全了解JavaScript events工作方式。 这个想法是给浏览器一个指令：

Hey browser, when x happens, run y :

x是事件名称/您感兴趣的动作，

y是您要运行的代码。 y有时称为eventHandler/eventListener没什么，只是一个函数。 -如下所示。 （eventListener与normal code that executes top-to-bottom不同normal code that executes top-to-bottom ，然后可以稍后运行，->当用户决定执行该操作时。）

在JavaScript中，所有事件都有特定的事件：单击（ click ），调整大小（ resize ），移动鼠标（ mousemove ），拖动（ drag ）等-有数百种，并且已经由浏览器实现。 在此处查看事件列表

每个事件都与页面上的对象/元素相关联。 因此，当您想知道某个特定元素何时执行此操作之一时，您需要register a piece of code to run/eventListener/eventHandler应用于该对象。 当动作/事件发生在该对象上时-您注册的代码将运行。 这一切都是自动发生的。

这个事件的想法是JavaScript的核心，在解决这类交互问题时，您需要具备一些高级知识。

在您的特定情况下，您需要将eventListener附加到window object 。

（ window是一个像document这样的global object 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";


}