jQuery 2.1 | Defering function until external scripts are manually loaded

Question

Here's my dilemma: A browser hard refresh empties the browser cache, and when that happens while internet connection is lost, I cannot use my app when the internet connection resumes. I therefore want to manually (seamlessly) reload Google's client.js script and related Youtube APIv3 via a button.

Is there a proper way to defer a function (fetching Youtube data) until all required Youtube scripts are successfully manually loaded? That function would firstly have to check if the needed Youtube resources are available in the browser cache before polling the needed external resources.

I have this code but do not know how to set up connection() and defer correctly. Help would be appreciated:

function connection() {
// How to verify if needed resources are in browser cache, if not,
// fetch them externally?
// apis.google.com/js/client.js?onload=googleApiClientReady
}

function googleApiClientReady(){ gapi.client.setApiKey('API key');
gapi.client.load('youtube', 'v3', function(){
appdefaults();
});
}

function lostconnection() {
alert('Connection lost.');
}

function verifynetwork(){ // Check connection status
var i = new Image();
i.onload = connection;
i.onerror = lostconnection;
i.src = '//img.youtube.com/vi/4xmckWVPRaI/1.jpg?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image
// coming from cache.
}

$(function(){
$('#YTdata').on('click', function(){
verifynetwork();
ytdata(); // Defer this function until verifynetwork() has completed?
}

<button id="YTdata">Get data</button>

Unless I'm missing something obvious, the whole basis of the question seems wrong. "A browser hard refresh empties the browser cache ..." - are you sure; it shouldn't. "... and when that happens while internet connection is lost, I cannot use my app when the internet connection resumes" - what, not even after another hard refresh? If the scenario was real, then how would the app ever get started in the first place? How would thousands of other apps ever recover from connection failure? — Roamer-1888, Jan 30 '15 at 19:16
@Roamer-1888 Hard-refresh (Ctrl-F5). If while doing so the network connection fails (either globally or from a specific server) and my Youtube resources haven't loaded successfully, then my app will be able to work locally but not be able to fetch external Youtube data even after Youtube servers resume because of lack of loaded resources (API, scripts, etc). So a button to manually download the missing Youtube scripts instead of another hard-refresh (which will lose my local data) is preferred. — koolness, Jan 30 '15 at 21:41

score 1 · Accepted Answer · edited May 23 '17 at 12:12

I did not completely follow what you're trying to do when the network is not available, but here's a version of verifyNetwork() that will tell you if the network is available or not using a jQuery promise:

function verifyNetwork() {
    var d = $.Deferred();
    var img = new Image();
    img.onload = d.resolve;
    img.onerror = d.reject;
    img.src = '//img.youtube.com/vi/4xmckWVPRaI/1.jpg?d=' + new Date().getTime();
    return d.promise();
}

$(function() {
    $('#YTdata').on('click', function() {
        verifyNetwork().then(function() {
            // network is available
        }, function() {
            // network is not available
        })
    });
});

If you have multiple async things you want to wait for, then you can make each one return a promise that will be resolved when the resource is ready and you can then use jQuery's $.when() to be notified when all the promises are resolved.

Other references for detecting a network connection:

Check if Internet Connection Exists with Javascript?

Detect that the Internet connection is offline?

How to detect online/offline event cross-browser?

Check If Internet Connection Exists in JavaScript

Just what I needed, with custom functions for each event to boot! I will take the time to visit those references, Thx for big help! — koolness, Jan 31 '15 at 01:05

jQuery 2.1 | Defering function until external scripts are manually loaded

1 Answers1