How to manipulate the DOM before the browser starts loading assets?
I want to serve the same DOM to all browsers and devices for example. desktop, tablet, phone, etc. However, I don't want resources (images, stylesheets, etc.) to target only desktops, loaded on mobile and processed HTTP requests and bandwidth.
Is there a way to manipulate the DOM before the browser starts loading assets using strict client-side javacript, depending on the device and browser?
I like using the DOMContentLoaded event ( https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded ) closes me ..
EDIT: I found that mobify.js seems to do what I get after: https://www.mobify.com/mobifyjs/v2/docs/
They provide a "Capturing API to manipulate the DOM before any resources are loaded." This is done with client-side javascript as well. You will have to look at their source on GitHub to see how they do it.
source to share
One easy way to send relevant device images is with responsive images . It will resize the images based on the breakpoints you set and your visitor's screen size.
What I especially like about this particular solution is that it also easily installs on an existing site. You can try this, and if it works well for your site, then you're gone.
There are several JS methods for submitting different CSS files based on screens or viewport. I've used one in the past, but FWIW I've found that if you minify and compress your CSS files, there are not many of them available and it only adds a layer of complexity. Your time is much better spent trying to conserve bandwidth on your images.
EDIT
Another possibility that might work for you is the new srcset attribute, a few links to get started:
http://css-tricks.com/video-screencasts/133-figuring-responsive-images/
http://martinwolf.org/2014/05/07/the-new-srcset-and-sizes-explained/
Good luck!
source to share
The only thing I could think of is naive and implies using "document.write" to include "img" tags just for connecting to the desktop. However, you also indicate that you want the same DOM for all devices, whereas in this case there will be JavaScript elements. Unfortunately you don't want to do this from the server side, which would be simpler and cleaner.