javascript - 延迟加载 jquery 后替换 $(document).ready(function()

Question

我的页面底部有这种延迟加载脚本。它加载脚本正常，但旧的 jquery onload 事件现在丢失了。

var dfLoadStatus = 0;
var dfLoadFiles = [
      ["//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"],
      ["//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
       "/js/jquery.unveil.js",
       "/scripts/js/jquery.cookie.js"]

];


function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for (var i = 0; i < dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function() {
            if (!this.readyState || this.readyState == 'complete') {
                dfLoadStatus--;
                if (dfLoadStatus==0) downloadJSAtOnload();
            }
        };
        document.body.appendChild(element);
    }
}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

在转向延迟加载之前，我曾经在 jquery 加载后使用过很多此类脚本:

$(document).ready(function() {
    $("img").unveil(200);
});

如何为该 jquery 函数创建替换函数/事件，以检测何时加载所有这些脚本，或者至少检测何时加载 jquery？

Answer 1

我的浏览器正在缓存该文件，因此旧代码对我有用。我重写了它，现在它对我来说效果很好。

JSBin

JavaScript

var dfIndex = 0;
var dfLoadFiles =[
     "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js",
     "//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
     "//cdn.rawgit.com/luis-almeida/unveil/master/jquery.unveil.js",
     "//cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"];


function downloadJavasSript(){
    loadJavaScript(dfLoadFiles[dfIndex]); 
}
function loadJavaScript(file,callback){
    var head=document.getElementsByTagName("head")[0];
    var script=document.createElement('script');
    script.src=file;
    script.type='text/javascript';
    //real browsers
    script.onload=isJavaScriptLoaded;
    //Internet explorer
    script.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            isJavaScriptLoaded();
        }
    };
    head.appendChild(script);
}

function isJavaScriptLoaded(e){
  dfIndex++;
  if (dfIndex === dfLoadFiles.length){
    pageLoaded();
  } else {
    loadJavaScript(dfLoadFiles[dfIndex]); 
  }
}


function pageLoaded(){
  console.log('page loaded');
  $("img").unveil();
}

if (window.addEventListener)
    window.addEventListener("load", downloadJavasSript, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJavasSript);
else window.onload = downloadJavasSript;