Usage
This function runs automatically, so it is not called manually. Is this incorrect?
Demo
Large image loaded normally (not lazy-loaded).
This should appear in a Lighthouse audit under Performance > Opportunities > Offscreen images > View Details

Large image loaded using lazy-load.
Despite being very similar to the previous large image, it will not appear in the same Lighthouse audit.
Lazy loading a background image with the .lazy-load class
This should also not appear in the same Lighthouse audit as above.
Iframe loaded using lazy_iframe()
.
Additional Notes
- For
<img>
elements, you can use thelazy_img()
function (orlazy_load()
). - For
<iframe>
elements, you can use thelazy_iframe()
function (orlazy_load()
). - For all other HTML elements, use the
lazy_load()
. - For background images, add the class
.lazy-load
to the element.
Warning: The HTML (<img>
, <iframe>
, etc.) methods support non-JavaScript environments, but the .lazy-load
method requires JavaScript to work.
To trigger the load function manually, use nebula_load
event trigger: jQuery(document).trigger('nebula_load');
Once the load function is triggered, the listeners are removed (except for the force_load trigger) as they are no longer needed.
Source File
This function was not found in /assets/js/nebula.js. Please report this error.
Override
To override or disable this JavaScript function, simply redeclare it with the exact same function name.
function lazyLoadHTML(){ //Write your own code here, leave it blank, or return false. }