Skip to Content

lazyLoadAssets()

Only load certain third-party JavaScript libraries on pages which they are needed.

JavaScript February 7, 2021

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Source File

Located in /assets/js/modules/optimization.js on line 443.

No Hooks

This function does not have any filters or actions available. Request one?
JavaScript
nebula.lazyLoadAssets = async function(){
    nebula.site.resources.lazy.promises = {};

    //Lazy load elements as they scroll into viewport
    try {
        //Observe the entries that are identified and added later (below)
        let lazyObserver = new IntersectionObserver(function(entries){
            entries.forEach(function(entry){
                if ( entry.intersectionRatio > 0 ){
                    nebula.loadElement(jQuery(entry.target));
                    lazyObserver.unobserve(entry.target); //Stop observing the element
                }
            });
        }, {
            rootMargin: '50%', //Extend the area of the observer (100% = Double the Viewport). Try to prevent visible loading of elements by triggering the load much earlier than actually needed.
            threshold: 0.1
        });

        //Create the entries and add them to the observer
        jQuery('.nebula-lazy-position, .lazy-load').each(function(){
            lazyObserver.observe(jQuery(this)[0]); //Observe the element
        });

        //When scroll reaches the bottom, ensure everything has loaded at this point
        //Only when IntersectionObserver exists because otherwise everything is immediately loaded anyway
        let lazyLoadScrollBottom = function(){
            if( nebula.dom.window.scrollTop()+nebula.dom.window.height() > nebula.dom.document.height()-500 ){ //When the scroll position reaches 500px above the bottom
                nebula.loadEverything();
                window.removeEventListener('scroll', lazyLoadScrollBottom); //Stop listening for this scroll event
            }
        };
        window.addEventListener('scroll', lazyLoadScrollBottom); //Scroll is passive by default
    } catch(error){
        nebula.loadEverything(); //If any error, load everything immediately
        nebula.help('Lazy Load Observer: ' + error + '. All assets have been loaded immediately.', '/functions/lazyloadassets/', true);
    }

    //Load all lazy elements at once if requested
    nebula.dom.window.on('nebula_load', function(){
        if ( typeof window.requestIdleCallback === 'function' ){ //If requestIdleCallback exists, use it. Remove this check when Safari supports it
                window.requestIdleCallback(function(){
                    nebula.loadEverything();
                });
        } else { //Otherwise, just run immediately
            nebula.loadEverything();
        }
    });

    //Lazy load CSS assets
    //Listen for requestIdleCallback here when Safari supports it
    jQuery.each(nebula.site.resources.lazy.styles, function(handle, condition){
        if ( condition === 'all' || jQuery(condition).length ){
            if ( nebula.site.resources.styles[handle.replaceAll('-', '_')] ){ //If that handle exists in the registered styles
                nebula.loadCSS(nebula.site.resources.styles[handle.replaceAll('-', '_')]);
            }
        }
    });

    //Lazy load JS assets
    //Listen for requestIdleCallback here when Safari supports it
    jQuery.each(nebula.site.resources.lazy.scripts, function(handle, condition){
        if ( condition === 'all' || jQuery(condition).length ){
            if ( nebula.site.resources.scripts[handle.replaceAll('-', '_')] ){ //If that handle exists in the registered scripts
                nebula.loadJS(nebula.site.resources.scripts[handle.replaceAll('-', '_'), handle]); //Load it (with a Promise)
            }
        }
    });

    nebula.initMmenu(); //Mmenu lazy load happens in its own function

    //Load the Google Maps API if 'googlemap' class exists
    if ( jQuery('.googlemap').length ){
        if ( google?.maps ){ //If the API has not already been called
            nebula.loadJS('https://www.google.com/jsapi?key=' + nebula.site.options.nebula_google_browser_api_key, 'google-maps').then(function(){ //May not need key here, but just to be safe.
                google.load('maps', '3', {
                    other_params: 'libraries=places&key=' + nebula.site.options.nebula_google_browser_api_key,
                    callback: function(){
                        nebula.dom.document.trigger('nebula_google_maps_api_loaded');
                    }
                });
            });
        } else {
            nebula.dom.document.trigger('nebula_google_maps_api_loaded'); //Already loaded
        }
    }

    if ( jQuery('pre.nebula-code, pre.nebula-code').length ){
        nebula.loadCSS(nebula.site.resources.styles.nebula_pre);
        nebula.pre();
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

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