prImages is a JavaScript prototype function (still in development), created by hnldesign, that allows for progressive and responsive image loading. It was written with phpThumb in mind as an image-generating backend, but can easily be adapted to either pre-rendered images, or another resizing/thumbnail library.
prImages watches for page load, browser resizing and scrolling to do its work. Only visible elements are processed (this can be disabled entirely, or per-image), and image fitting is done by matching upwards to common responsive width breakpoints (160, 320, 480, 768, 1024, 1224, 1824 pixels) as opposed to what width would be available. This prevents a plethora of image sizes to be generated, by limiting them effectively (without cropping) to 7 versions per image. Pixel aspect ratio of the browsing device is also taken into account.
This gallery is a demonstration of prImages, with both div and img elements and debug-info (feedback) on changes and dimensions. Resize, scroll and reload the page to see it in action. Disable cache to see the progressive part on each refresh, disable JavaScript to see the graceful fallback.
More info on how prImages works will follow soon...
© 2014 hnldesign.nl, Images by the talented Simon Stalenhag, the equally great Ivan Shishkin (a Russian landscape painter) and some random ones.