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
divs within the page (which have a class ofdelayed-image-load) into a transparent GIF using a Base64 encoded string.- We set the
width&heightHTML attributes of the image to the required size - We know what size the image needs to be because each
divhas customdata-attrset server-side to the size of the image - We then set a class of
image-replaceonto each newly created transparent image
- We set the
- We use a 250ms
setTimeoutto unblock the UI thread and which calls a functionresizeImageswhich enhances theimage-replaceimages so their source is now set to a URL whe