Another Late-loaded blurred image replacement
Improve perceived page load times by displaying a blurry low resolution image(s) immediately, without extra HTTP requests.
Once page has fully loaded, fetch the high resolution image(s), then cross-fade onto the display.
Blurred image replacement, late loader.
- Initially displays a CSS data URI embedded, small (< 2 KB) image, which is blurred to mask compression artifacts.
- After the page onload event fires the full resolution image is requested.
- Once the image request has fullfilled the image is animated into the viewport. A 1.5 second delay is added to emulate a slow network.
Small image is 140 x 42px @ 2KB and embedded as dataURI.
Large image is 1400 x 420px @ 437KB (ideally an easily divisible height and width combination).
Please note: Things may get unpredictably better or worse while modules are under development.