Trigger Lazy-Loading yourself through code

Sometimes, the script will not be able to lazy-load certain assets. It relies on the user scrolling and the Intersection Observer. But elements that are out of the normal flow (fixed positioning for instance) might not load.

You have access to JS functions that allow you to easily trigger the loading of such elements. These functions are:

page_speed_helper.displaymedia(media, laziedclass, callbackbefore, callbackafter) page_speed_helper.displaymedia(media, laziedclass, callbackbefore, callbackafter) For both functions, the first parameter "media" is a selector. It must be a string and not a DOM element or a node.

First Example: trigger the loading of an image Say you have an tag with a class name of 'logo' that requires manual loading. Somewhere in a script do:

if ('page_speed_helper' in window) { if (page_speed_helper.displaymedia) { page_speed_helper.displaymedia("img.logo"); } } And that's it, the image will be lazy-loaded.

This function displaymedia() works with any element that has an src, srcset, or style attribute. So any image, picture, iframe... or any element with inline styling can be triggered with this function.

Triggering means the style will be applied and the src and srcset resources will be loaded as needed.

Second Example: trigger the loading of a Core Google map Please keep in mind this is for maps added to the page using the core Google Maps block.

Core Google Maps will have an attribute of "gmaps" so you can load them using the function displaycoregmaps() like this:

if ('page_speed_helper' in window) { if (page_speed_helper.displaycoregmaps) { page_speed_helper.displaycoregmaps("[gmaps]"); } } Alternatively you can use your own class instead of the "gmaps" attribute.

Third Example: trigger the loading of a non-Core Google map Say you added a Google Map to your page by other means than the Core Google Maps block. Google Maps are usually iframes so you can use the previous function displaymedia() to lazy load your map. Use the same code for the image above but target your iframe instead.

Advanced Example using callback functions Both functions displaymedia() and displaycoregmaps() take 3 more parameters:

laziedclass: classes that will be added to the element after loading it callbackbefore: a callback function to run before loading the element. If the function returns FALSE the element is not loaded callbackafter: a callback function to run after the element is loaded Let's see an example. I want to lazy load some images with a class name of "logo" but not ones that also have a class name of "no-load".

I also want to give them an extra class of "logo-loaded".

Finally, I want to give them a style of "display: block" after they're loaded.

Here's what my code could look like:

function callbackbefore(media) { if (media.matches(".no-load")) { // by returning false here // I make sure the element is not included return false; } }

function callbackafter(media) { media.style.display = "block"; }

if ("page_speed_helper" in window) { if (page_speed_helper.displaymedia) { page_speed_helper.displaymedia( "img.logo", "logo-loaded", callbackbefore, callbackafter ); } } Alternatively, instead of using the callbackbefore function to filter out elements with a class of "no-load", I could do that directly with my media selector modified like this: "img.logo:not(.no-load)"

Then my code would look like this:

function callbackafter(media) { media.style.display = "block"; }

if ("page_speed_helper" in window) { if (page_speed_helper.displaymedia) { page_speed_helper.displaymedia( "img.logo:not(.no-load)", "logo-loaded", false, callbackafter ); } } You will notice that instead of calling my callbackbefore function, I replaced it with FALSE. NULL would work too.