javascript - conditionally load images for responsive designs -

I am restructuring an adaptive layout on an existing site. Basically the site is converted into 100% width mobile style layout in 500 pixels. Generally I use EMS, but as I said, I am restructuring.

I know how to conditionally load JS and CSS, but how about html and images?

There is a large image on the site's homepage which fills the screen, I do not want it on my small screen layout, so I want to load it if the browser is more than 500 pixels. The trouble is that I & lt; Img src = "..." /> etc can not be stored in JS because it is dynamically loaded with php. The client controls the images through the WordPress admin.

Any ideas will be appreciated. Thanks

This will work for one or two things. For site-wide picture loading preferences, there are other solutions.

For example see. I have tested it in Dev Tool so that big image does not load.

So, you get the width of the window with the .width () and store it in the variable (which you want) I have called it < / Em> wWidth then an if statement if the window-width is more than 1200px (it is useless that you can not use them) --- THEN , this image Load it - Otherwise, load this small image to get it in the DOM, you will see html in the

.appendTo () 1200) {$ ('& lt; img alt = "big image" src = "http://placehold.it/1200/1200" /> & gt;'). AppendTo ('. Sidebar'); $ ('. Sidebar A'). Hide ();} and {$ ('& lt; IMG alt = "small image" src = "http://placehold.it/600/600" />) .appendTo (' .sidebar '); }});

This example was for a map ... so if they wanted to load Google Maps, then I had a link that could press to load a good map there Are there. (But then, if the window was big, I did not need that link - so I sent it to .hide ()

04/04/2014

By April 2014, I am replacing SRC with attr (), in this way, you keep your image for mobile, and then if it is a large screen you can insert the source of the big image. But then you load 2 images ... then you can load 1px x 1px blank GIF or something to start ... instead of

HTML

  
  
 JQuery  
  var imageSizeThing = function () { Var windowWidth = $ (window). Width (); if (windowWidth & lt; 501) {// If you start with an empty GIF or something $ ('# Target01 img') .attr ('src', 'Http: //placehold.it/640x640& Text = defa ULT image '); } If (window title> 500) {$ ('# target01 img') .attr ('src', 'http: //placehold.it/1000x1000'); } If (WindowAuth> 900) {$ ('# target01 img') .attr ('src', 'http: //placehold.it/1800x1800'); } If (WindowWidth & gt; 1200) {$ ('# target01 img') .attr ('src', 'http: //placehold.it/2400x2400'); }}; // is ready to call it on the DOM, and if it makes sense, when window $ (document) resizes .ready (imageSizeThing); $ (Window) .resize (imageSizeThing);