3

I want to serve the same DOM to all browsers and devices, e.g. desktop, tablet, phone, etc. However, I do not want the assets (images, stylesheets, etc.) intended only for desktop to be downloaded on mobile and waste HTTP requests and bandwidth.

Is there any way to manipulate the DOM before the browser starts downloading the assets, using strictly client-side Javacript, depending on the device and browser?

I feel like using the DOMContentLoaded event (https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) gets me close..

EDIT: I have found that mobify.js seemingly does what I am after: https://www.mobify.com/mobifyjs/v2/docs/

They provide a 'Capturing API for manipulating the DOM before any resources have loaded'. It also appears to be done with client-side Javascript. Will have to look through their source on GitHub to see how they are doing it.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
James
  • 157
  • 2
  • 12
  • I think you want to ask the question in your second sentence, e.g., *how should you build your site in a responsive way to minimize HTTP requests and downloads*. `DOMContentLoaded` *may* run before page load. I would think there were responsive techniques for doing this better, though ([or at least intelligently](http://stackoverflow.com/a/8660305/451969)). – Jared Farrish Oct 24 '14 at 20:27
  • @JaredFarrish, that's true. In this case, I have several images in particular that are only used on desktop and it is a waste to have those on mobile download the, when they are not going to use them. I would like to be able to remove the from the DOM with javascript before it is downloaded, when feature detection let's me know that I am serving to a mobile browser. – James Oct 24 '14 at 20:34
  • @Louis how can I run some javascript before any images are downloaded might be a better question. – James Oct 24 '14 at 22:44

2 Answers2

1

One easy option to send device appropriate images is adaptive images. It will resize the images based on break points you set, and on your visitors' screen size.

What I particularly like about this specific solution is that it's also easy to instal to an existing site. You can try it out and if it's a good fit for your site then you are off.

There are some JS techniques to send different CSS files based on screensize or viewport. I have used one in the past, but FWIW I've found that if you minimize and compress your CSS files, there's little be gained and it only adds a layer of complexity. Your time is much better spent trying to save bandwidth on your images.

EDIT
Another possibility that might might work well for you is the newer srcset attribute, a couple of links to get you 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!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • @ David Taiaroa, that looks pretty good. Although, I would prefer not to send that info back to the server and have it serve a different image. Preferably that would all run client-side. – James Oct 25 '14 at 04:36
  • @ David, thanks. Would still like to be able to affect more than images. – James Oct 26 '14 at 00:31
0

The only thing I could think about it is kinda naive and implies the use of "document.write" to include the "img" tags just for desktop connections. However, you also point that you want the same DOM for all devices, whereas there will be javascript elements in this case. Unfortunately you don't want to do it from server side which would be easier and clean.

  • Ya, I kind of want to do the reverse of this and do something like `$('img').remove();` before the images are downloaded. – James Oct 24 '14 at 22:46
  • Still don't get it enough because you want to preserve the DOM for all devices but the remove method clearly mess with the DOM. –  Oct 25 '14 at 01:21
  • @ ADASein, I want to send the same HTML from the server each time, and then affect it on the client-side with javascript before assets are downloaded. Particularly, I want to remove images needed for the desktop from the DOM before they are downloaded on mobile browsers. – James Oct 25 '14 at 04:31