Skip to Content
Menu

predictiveCacheListeners()

Attempt to predict the next pageview for caching/prefetching.

JavaScript February 7, 2021

Usage

JavaScript
nebula.predictiveCacheListeners()

Parameters

This function does not accept any parameters. Is this incorrect?

Additional Notes

If a service worker is being used (and Cache API is available), the resource will be fetched and added to the cache. Otherwise, it will attempt to prefetch with a resource hint instead.

It also does not run when offline.

Note: This only enables event listeners! To add to the cache, see nebulaAddToCache() ornebulaPrefetch().

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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

    No Hooks

    This function does not have any filters or actions available. Request one?
    JavaScript
    nebula.predictiveCacheListeners = async function(){
        //If Save Data is supported and Save Data is requested do not bother with predictive listeners
        if ( navigator.connection?.saveData ){
            return false;
        }
    
        //Any post listing page
        if ( jQuery('.first-post .entry-title a').length ){
            nebula.prefetch(jQuery('.first-post .entry-title a').attr('href'));
        }
    
        //Internal link hovers
        let predictiveHoverTimeout;
        jQuery('a').on('mouseenter', async function(){
            await nebula.yield();
    
            let $oThis = jQuery(this);
            let url = $oThis.attr('href');
    
            if ( url && !predictiveHoverTimeout ){
                predictiveHoverTimeout = window.setTimeout(function(){
                    predictiveHoverTimeout = null; //Reset the timer
                    nebula.prefetch(url); //Attempt to prefetch
                }, 250);
            }
        }).on('mouseleave', function(){
            if ( predictiveHoverTimeout ){
                window.clearTimeout(predictiveHoverTimeout);
                predictiveHoverTimeout = null;
            }
        });
    
        //Once idle, prefetch the top-level nav items and buttons
        //Disabled to reduce the broad background loading. The above hover prefetch is more focused.
    //     if ( typeof window.requestIdleCallback === 'function' ){ //Waiting for Safari to support requestIdleCallback
    //         //Prefetch certain elements on window idle
    //         window.requestIdleCallback(function(){
    //             //Top-level primary nav links
    //             jQuery('ul#menu-primary > li.menu-item > a').each(function(){
    //                 nebula.prefetch(jQuery(this).attr('href'), false, jQuery(this));
    //             });
    //
    //             //First 5 buttons
    //             jQuery('a.btn, a.wp-block-button__link').slice(0, 4).each(function(){
    //                 nebula.prefetch(jQuery(this).attr('href'), false, jQuery(this));
    //             });
    //         });
    //     }
    };
    

    Override

    To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).

    JavaScript

    For non-module import functions:

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


    For dynamically imported module function overrides:

    jQuery(window).on('load', function(){
        nebula.predictiveCacheListeners = function(){
            //Write your own code here, leave it blank, or return false.
        }
    });


    Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:

    jQuery(document).on('nebula_module_loaded', function(module){
        //Note that the module variable is also available to know which module specifically was imported
        if ( typeof nebula.predictiveCacheListeners === 'function' ){
            nebula.predictiveCacheListeners = function(){
                //Write your own code here, leave it blank, or return false.
            }
    	}
    });