Skip to Content

lazyLoadAssets()

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

JavaScript July 2, 2019

Usage

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

Source File

Located in /assets/js/nebula.js on line 2841.

Note: This function contains 3 to-do comments.

JavaScript
nebula.lazyLoadAssets = function(){
    //Lazy load elements as they scroll into viewport
    if ( 'IntersectionObserver' in window ){ //Only if Intersection Observer API is available. https://caniuse.com/#feat=intersectionobserver
        //Observe the entries that are identified and added later (below)
        var 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: '100%', //Extend the area of the observer by the size of the viewport (essentially doubling the height of the detection area). This prevents 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
        var 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);
    } else {
        nebula.loadEverything(); //If IntersectionObserver is not available, load everything immediately
    }

    //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
                window.requestIdleCallback(function(){
                    nebula.loadEverything();
                });
        } else { //Otherwise, just run immediately
            nebula.loadEverything();
        }
    });

    //Lazy load CSS assets
    //@todo "Nebula" 0: listen for requestIdleCallback here after IE11 no longer supported (still need conditional per Safari): https://caniuse.com/#feat=requestidlecallback
    jQuery.each(nebula.site.resources.lazy.styles, function(handle, condition){
        if ( condition === 'all' || jQuery(condition).length ){
            if ( nebula.site.resources.styles[handle.replace(/-/g, '_')] ){ //If that handle exists in the registered styles
                nebula.loadCSS(nebula.site.resources.styles[handle.replace(/-/g, '_')]);
            }
        }
    });

    //Lazy load JS assets
    //@todo "Nebula" 0: listen for requestIdleCallback here after IE11 no longer supported (still need conditional per Safari): https://caniuse.com/#feat=requestidlecallback
    jQuery.each(nebula.site.resources.lazy.scripts, function(handle, condition){
        if ( condition === 'all' || jQuery(condition).length ){
            if ( nebula.site.resources.scripts[handle.replace(/-/g, '_')] ){ //If that handle exists in the registered scripts
                nebula.loadJS(nebula.site.resources.scripts[handle.replace(/-/g, '_')]);
            }
        }
    });

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

    //Load the Google Maps API if 'googlemap' class exists
    if ( jQuery('.googlemap').length ){
        if ( typeof google == "undefined" || !nebula.has(google, 'maps') ){ //If the API has not already been called //@todo "Nebula" 0: Replace with optional chaining
            nebula.loadJS('https://www.google.com/jsapi?key=' + nebula.site.options.nebula_google_browser_api_key, 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.
}