Don't load div that is displayed none in the dom using JS

by

I have 2 divs, one of them is for Internet explorer and the other for the rest of the browsers. The one which is for IE is hidden using display:none for the other browsers and displayed using media query for Internet explorer. Everything works fine at the moment. But this doesn’t seem like the ideal solution since the display:none div does appear in the DOM which isn’t good for performance. How do I initialize only the elements that are visible or how do I not initialize elements using JS that have display:none

<div style="display:none"id="explorer">Internet explorer</div>
<div id="rest">Chrome,Firefox,etc</div>

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #explorer{
        display: block !important;
    }
    #rest{
        display: none;
    }
}

So if you load this in Chrome, <div style="display:none"id="explorer">Internet explorer</div> won’t display in the view, but you will be able to see it through the dev tools. I would like this not to initilize at all using JS for chrome, firefox, etc and not initialize <div id="rest">Chrome,Firefox,etc</div> for IE.

20 thoughts on “Don't load div that is displayed none in the dom using JS”

  1. Hey! I know this is somewhat off topic but I was wondering
    which blog platform are you using for this site? I’m getting fed up of WordPress because I’ve
    had issues with hackers and I’m looking at options for another platform.
    I would be fantastic if you could point me in the direction of a good platform.

    Reply

Leave a Comment