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:
For both functions, the first parameter "media" is a selector. It must be a string and not a DOM element or a node.
Say you have an <img> tag with a class name of 'logo' that requires manual loading. Somewhere in a script do:
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.
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:
Alternatively you can use your own class instead of the "gmaps" attribute.
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.
Both functions displaymedia() and displaycoregmaps() take 3 more parameters:
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:
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:
You will notice that instead of calling my callbackbefore function, I replaced it with FALSE. NULL would work too.