How to use .load to .prepend content without page refresh?

Question

I'm trying to use jQuery to only load certain content if the viewport is above a specified width.

This works, but not quite right. Check out the JsFiddle link at the bottom for a working demo.

Here's what I have so far;

• If the viewport is below 500px #wrapper is hidden with a media query .
• Above 500px #wrapper is set to visibility: visible;
• jQuery is looking for element.is(':visible') . When this happens jQuery loads the image.
• Resizing the browser window activates the media query , but not the jQuery .
• The jQuery only fires on a page refresh.

I've tried using $( window ).resize(function() but this fires every time the viewport changes size, duplicating the content.

Is there a way to activate jQuery without a page refresh?

The ideal solution would be;

• up to 500px load nothing,
• when the viewport is resized above 500px load the jQuery.
• If the viewport is resized below 500px unload the jQuery content.

HTML

 <p>CSS hides <strong>#wrapper</strong> if viewport is below 500 pixels.</p>
 <div id="wrapper">
<p>jQuery checks CSS to see if <strong>#wrapper</strong> is visible and loads image on page refresh.</p>
<p>I'm looking for a way to run this function without needing to refresh the page. I've looked into using (resize) function, but this duplicate the content.</p>

CSS

#wrapper {
visibility: none;
display: none;
  }

   @media only screen and (min-width: 500px){
   #wrapper {
          visibility: visible;
        display: block;
        }}

JQuery

  $(function() {

 var element = $(this).find('#wrapper');

 if (element.is(':visible')) {
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
  }

JsFiddle link:

https://jsfiddle.net/tu60wbbu/13/

Answer 1

You can use window.matchMedia() instead of $(window).resize() to have your javascript respond to a media query match in your CSS.
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

It's fairly well supported across browsers. http://caniuse.com/#search=matchmedia

If you need to support IE 9 or lower, you might have to fall back to using $(window).resize() for those browsers.

Answer 2

Here is the code for my comment:

$(function() {
var large = false;
var barrier = 1000;

$( window ).resize(function() {
    if(!large && $(window).width() > barrier) {
        large = true;
        $('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
    } else if(large && $(window).width() < barrier) {
        large = false;
        $('#wrapper img').remove();
    }
}); 

});

Working Fiddle: https://jsfiddle.net/tu60wbbu/14/
I used 1000px as the barrier in the demo.

You should initialize large properly by the window width on load. For demo purposes i used false as initial value.

Sorry for the long time, I was at vaccation :-)