Lazy loading

How to test

On a page that uses lazy images, open the network tab of your browser and filter to only see requests for images. Refresh the page if needs be.

You should only see requests for images that you can see in front of you. As you scroll and other images come into view, you should see these loaded in the network tab.

There should only be one request for each image. If you are seeing more, make sure that "Disable cache" is not enabled.

The first request loads this image into the in-memory cache, the second would read the image from the cache to render. If "Disable cache" is enabled the second request will get the image again.

What is _lazy-images.js doing?

init

initOnLoad: true, this will call init on load of _lazy-images.js

1. Looks for data-lazy-image-background attributes.
2. For each found create an Intersection Observer see Intersection Observer.
   1. Create an Intersection Observer with a intersection handler function that will load the image and remove the observer when the element being observed enters or is on the viewport.
   2. Call the observe function with the image element to observed.

When the element that will contain the image enters or is on the viewport the Intersection Observer will call intersection handler function which will load the image and remove the observer.

loadImage

1. Create a new image element by calling Image(). This will hold the src and the event listeners.
2. Get the element with attribute data-lazy-image-background and put it into the image element src.
3. If there is a data-lazy-image-child attribute, which is used by cards to make the transition work, for example, the zoom effect on background images commonly used on cards.
   1. Add a div which will contain the background image and all attributes and classes.
4. Add load, error and transitionend event listeners to the image element.

Using data-lazy-image-background attribute with data-lazy-image-child