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

Question

I have an image, like this :

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

I need when the size of the page changes, it replace with another photo, that I want!

How can I do this in "JAVA SCRIPT" ?!

Answer 1

With onresize event you detect any page size change, I suggest you validate some width or height before changing the photo, if you do not do this validation, any change in size will change the photo and I think that's not what you want.

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

Answer 2

if you want to change the assets for ie retina you can use this library http://imulus.github.io/retinajs/

You can also add an eventhandler on the resize event for getting the width and than evaluate within a if or 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

Welcome to Stack Overflow Arash EB :)

Seems you want to switch to another image when the browser window is resized.

To do this - you need to know when the window size is changed/resized .

You can't know that upfront , because it depends on user interaction. The user might decide to resize it now, or to resize it later - you don't know, you can't predict when will happen..

To solve this problem - we have events .

I assume you don't fully understand how JavaScript events work. The idea is that you give an instruction to the browser :

Hey browser, when x happens, run y :

x is the event name/the action you are interested in,

and y is the code you want to run. y is sometimes called the eventHandler/eventListener - it's nothing fancy, is just a function. - as you will see below. (eventListeners are different than normal code that executes top-to-bottom , then can run later, -> when the user decides to perform that action.)

In JavaScript there are specific events for everything: clicking( click ), resizing( resize ), moving the mouse( mousemove ), dragging( drag ), etc - there are hundreds of them, and are already implemented for you by the browsers. See a list of events here

Every event is associated with an object / element on the page. So when you want to know when a particular element is doing one of this actions, you need to register a piece of code to run/eventListener/eventHandler to that object. When the action/event happens on that object - the code you have registered will run. All this happens automatically.

This events idea is at the heart of JavaScript and is somewhat the high level picture you need to have when solving this type of interaction problems..

In your specific case you need to attach an eventListener to the window object .

( window is a global object like document . window contains all information related to current browser 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";


}