Jump to content
Divya and the Jameses Pearce and Wragg have already provided some useful links to research and techniques for measuring layout. Thank you muchly. Here’s another handy related resource:
Scott Jehl has written some conditional-loading code for a similar situation, which he calls the anchor-include pattern. It progressively enhances links to fragment identifiers in other documents so that the contents of that fragment is requested once the page has loaded and inserted into the DOM (either before the link, after the link, or replacing the link).
You could take that code and wrap it in a test for screen widthâ€”be it using the humble but flawed clientWidth, the more powerful matchMedia, or by testing for a specific CSS property. In fact, Scott has updated the code so that you can supply an optional threshold property to specify a pixel value that the screen needs to be above in order to trigger the Ajax request.
It’s written in jQuery but I don’t think it would take too much rewriting to make it work without that dependency (although jQuery does make the Ajax part a lot easier).