Lazy loading
how does the plugin works under the hood
The plugin uses the IntersectionObserver browser API to establish when it's the right moment to load the main image and trigger the animation.
The smaller placeholder image is quicker to render on the page and will give the user faster feedback. If a placeholder is not provided, the skeleton animation will be displayed by default.
Read more about Low-Quality Placeholder Image (LQPI) technique in this article here.
Lazy-load all placeholders
By default, all placeholder images are eagerly loaded to give the user immediate feedback. Suppose we don't want to load all placeholder images at once; we can pass the lazy-placeholder attribute to the component, setting the image loading attribute to lazy instead.
The only caveat of lazy loading the placeholder is that we will know dimensions in a later stage and could cause the image to take 100% of its parent until we download it and calculate. It can be a good solution in cases where we have a CSS grid system or hard-coded size values.
Last updated