Configuring Image Preloading
If you enable responsive images, then images are loaded after the rest of the document has been loaded and displayed. Loading the images at the end often results in an annoying "page bounce" effect, where the text on the page is moved around and reformatted as the images are loaded. You can prevent this happening by enabling the Widget Framework's image preloading feature.
Image preloading prevents page bounce by loading alternative low-bandwidth images together with the page, and then replacing them with the proper full images at the end.
You can choose between two different image preloading methods:
proxy-
Low-quality representations of each image are loaded in-line, and then replaced by the full images after the document has finished loading.
placeholder-
Small placeholder images are loaded in-line, and then replaced by the correct images after the document has finished loading. By default, the placeholder images are transparent images located in the webapp's
static/img/placeholder/folder.
You can control preloading by setting a number of section parameters (usually in a publication's root section).These section parameters are associated with content profiles (see Content Profiles), so that different content profiles can have different preload settings.
The image preloading section parameters are:
-
wf.contentprofile.content-profile.image.preload -
wf.contentprofile.content-profile.image.proxy.size.scale -
wf.contentprofile.content-profile.image.proxy.enable.imagesize.min -
wf.contentprofile.content-profile.image.proxy.size.min -
wf.contentprofile.content-profile.image.proxy.size.max
where content-profile is the name of the
content profile (default by default).
The parameters should be configured as follows:
image.preload-
You can set this parameter to one of the following values:
proxy-
Preload low-quality initial images.
placeholder-
Preload static placeholder images.
none(default)-
Do not preload any images.
image.proxy.size.scale-
If
image.preloadis set toproxyandimage.policy(see Configuring Responsive Image Handling) is set togrid, then this value is used as a percentage scale to calculate size of the proxy image. A value of30, for example means that if the actual image width is500, the proxy/placeholder image width will be150. The default value is30. image.proxy.enable.imagesize.min-
If
image.preloadis set toproxyandimage.policy(see Configuring Responsive Image Handling) is set togrid, then proxy images will only be used for images that are wider than the minimum specified here. If you specify200, for example, then proxy images will only be loaded for images that are more than 200 pixels wide. The default value is200. image.proxy.size.min-
If
image.preloadis set toproxyandimage.policy(see Configuring Responsive Image Handling) is set toadaptiveorpicturefillthen this parameter specifies the minimum width of the proxy image. The default value is50. image.proxy.size.max-
If
image.preloadis set toproxyandimage.policy(see Configuring Responsive Image Handling) is set toadaptiveorpicturefillthen this parameter specifies the maximum width of the proxy image. The default value is200.