Pre-allocating space for images based on CSS and aspect ratio

[galbaras]

In most cases, IMG tags have width and height attributes, which can be used to determine the aspect ratio of the respective image, and CSS that governs the rendering of the image, such as max-width, which can help determine the space required for an image before it is lazy loaded.

Pre-allocating the space will prevent redrawing of the page after every lazy loading event and can improve the user experience when scrolling is quicker than image loading, because the content won't jump around.

Of course, if there is no sufficient information, the current behaviour can be used, but when there is, pre-allocating space is much preferred to not.

From a technical point of view, there are various ways to do this, such as padding the loading GIF (inline, and removing when loading the image) or adding a before/after element (and hiding it when the image is loaded).

Another approach entirely may be to hide the original image (which should prevent the browser from loading it - no need to change "src", only "display") and underlaying it with a sized container that has the "loading" GIF in the middle of its background. Lazy loading can then be simply returning the image to its original display value (and possibly hiding the "loading" container).

[alextuan]

@galbaras This is impossible, the cause that plugin filter both images are uploaded on current site and images are put from external site, so server will be take many memory to get image information for external site to put width and height attributes to image tag

If it's gallery with many images, server will be down maybe, it's impossible

[alextuan]

set Threshold value so that javascript will be load image before it shows on viewport and when scroll to that image, the content won't jump.

[galbaras]

@alextuan I did not mean to resize the image, just to include the width and height in the IMG tag. The browser will then reserve the correct area for the image and when the image is loaded, nothing else on the page will need to move.

Please read my original post again.