Skip to Content

lazyLoadHTML()

Load any HTML declared for lazy-loading at the appropriate time.

JavaScript June 28, 2018

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 the lazy_img() function (or lazy_load()).
  • For <iframe> elements, you can use the lazy_iframe() function (or lazy_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.

JavaScript
function lazyLoadHTML(){
    //Write your own code here, leave it blank, or return false.
}