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



我在页面底部有这种延迟加载脚本。它可以加载脚本,但现在缺少旧的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?

我的浏览器正在缓存文件,所以旧代码对我有效。我重写了它,现在它对我很有效。

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;

最新更新