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

时间:2017-07-24 13:04:19

标签: javascript

我有一张图片,如下:

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

当页面大小发生变化时,我需要用另一张照片取代我想要的内容!

我怎样才能在&#34; JAVA SCRIPT&#34; ?!

3 个答案:

答案 0 :(得分:0)

使用onresize事件您检测到任何页面大小更改,我建议您在更改照片之前验证某些宽度或高度,如果您不进行此验证,任何大小的更改都将更改照片,我认为& #39;不是你想要的。

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

答案 1 :(得分:0)

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

您还可以在resize事件上添加一个eventhandler来获取宽度,然后在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')
}

答案 2 :(得分:0)

欢迎使用Stack Overflow Arash EB:)

似乎您希望在browser window调整大小时切换到另一个图像。

要执行此操作,您需要在更改/调整窗口大小时知道

无法预先了解,因为它取决于用户互动。用户可能决定立即调整大小,或者稍后调整大小 - 您不知道,何时会预测

要解决此问题,我们有events

我认为你并不完全理解JavaScript events的工作方式。这个想法是你给浏览器一个指令:

Hey browser, when x happens, run y :

x是您感兴趣的事件名称/操作,

y是您要运行的代码。 y有时被称为eventHandler/eventListener - 它没什么特别的,只是一个功能。 - 正如您将在下面看到的那样。 (eventListeners与normal code that executes top-to-bottom不同,然后可以稍后运行, - &gt;当用户决定执行该操作时。)

在JavaScript中,所有内容都有特定事件:点击(click),调整大小(resize),移动鼠标(mousemove),拖动(drag),等等 - 有数百个,并且已经由浏览器为您实现。 See a list of events here

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

这个事件的想法是JavaScript的核心,在解决这类交互问题时你需要具备的高级图片。

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

windowglobal object,如documentwindow包含与当前浏览器窗口相关的所有信息。)

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";


}