The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).
The original BBC News process (and my re-working of the script) follows roughly these steps...
- Create new instance of ImageEnhancer
- Change any
div
s within the page (which have a class of delayed-image-load
) into a transparent GIF using a Base64 encoded string.
- We set the
width
& height
HTML attributes of the image to the required size
- We know what size the image needs to be because each
div
has custom data-attr
set server-side to the size of the image
- We then set a class of
image-replace
onto each newly created transparent image
- We use a 250ms
setTimeout
to unblock the UI thread and which calls a function resizeImages
which enhances the image-replace
images so their source is now set to a URL whe