Improve perceived page load times by displaying a blurry low resolution image(s) immediately, without any extra HTTP requests. Once page has fully loaded, fetch the high resolution image(s), then cross-fade onto the display.
Mike Foskett - (incept: )
Blurred background late loader
A work in progress.
Either the container or the content copy can define the height.
Three superimposed image layers are used.
Both the top and middle image layers have a small, extremely low quality, dataURI encoded background-image defined in the style sheet.
The smaller the image, the better. Keeping below 2 KB is strongly suggested.
To offset the low quality the top image layer has a blur filter applied.
The middle layer remains as is. It's purpose is to keep the container edges sharp.
Requires the browser to support: addEventListener, requestAnimationFrame, getElementsByClassName and let-for loop which are not tested before use in the module.
No scripting available?
Use CSS instead, not ideal but adequate under most circumstances.
Add the image to bottom layer after a small delay, to allow the image to fully download first.