jQuery append function and resizing

Question

I am attempting my first "progressive enhancement" site and have a question about jQuery append and browser resizing. Basically, I have it set up so that the default site that is loaded is the mobile version and then I have a jQuery function to append desktop elements to the divs on the page if the browser width is a minimum of 1100px.

It works great but now I just need to tackle the resizing issues. Currently, if you resize the browser window below 1100px width, the elements that are appended to the divs do not disappear until you refresh the browser. I would like to make it so that if the browser window is resized below 1100px, the elements that were appended disappear without a refresh.

Could someone point me in the right direction? Thanks!

HTML:

<div id="section1">

</div>

Javascript:

if (window.matchMedia("(min-width: 1100px)").matches) {
    $("#section1").append("\
        <div class='placeholder'>\
            <img src='assets/site/desktop_placeholder.png' />\
        </div>\
    ");
}

I would probably use css media queries, but you can also use the [resize event](http://api.jquery.com/resize/). — ioums, Nov 18 '13 at 20:45
I think you need to handle the resize event. Check out the following http://stackoverflow.com/questions/641857/javascript-window-resize-event — Aaron, Nov 18 '13 at 20:46
You should CSS3 media queries to handle the visibilty of the elements. Even if they not exist in the first time. — Carlos487, Nov 18 '13 at 20:46
Sorry, should have been more clear initially. The reason I am using append is because for the desktop site there will be around 70-100 elements that need to be loaded and I don't want them to load at all on the mobile version of the site. Basically it is a parallax site and for the mobile version I am just going to take screenshots of the elements in their final position and set them as the background images for the section DIVs so that there are only 5 images to load on the mobile version(one for each section) as opposed to loading all 70-100 elements separately and hiding them. — APAD1, Nov 18 '13 at 20:49
When a modern browser sees CSS display:none it won't load the hidden element, until its visibility changes. It should be safe to include the elements in your source on mobile, rather than insert them with javascript. — Landing on Jupiter, Aug 06 '19 at 11:38
@LandingonJupiter This is a very old question, but your statement is incorrect. `display:none;` [does not prevent images from being loaded](https://blog.piio.co/how-css-display-none-affects-images-on-page-load/). — APAD1, Aug 07 '19 at 19:06

APAD1 · Accepted Answer · 2013-11-18T22:15:33.543

I've been playing around with it a bit and I think I'm getting close. Let me know if there is a better way to do this or if you see any issues with this code. Thanks!

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
        $("#section1").append("\
            <div class='placeholder'>\
                <img src='assets/site/desktop_placeholder.png' />\
            </div>\
        ");
    }
    }else{
        $("#section1").empty();
    }
}

if (window.matchMedia("(min-width: 1100px)").matches) {
    appendElements();
}

$(window).resize(function(){
    appendElements();    
});

jQuery append function and resizing

1 Answers1