Question

我正在使用fancybox jquery插件，我试图将javascript推迟到页面加载结束

    <html>
    <head>
    </head>
    <body> 
        content
/*bottom of body*/
        <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" ></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".example3").fancybox({
                    'transitionIn'  : 'none',
                    'transitionOut' : 'none'    
                });
            });
        </script>
    </body>
    </html>

此时插件可以正常工作，但javascript不会延期。然后我将脚本更改为

<script defer="defer" type="text/javascript">
    window.onload=function(){
        var mycode;
        mycode=document.createElement("script");
        mycode.type="text/javascript";
        mycode.src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js";
        document.getElementsByTagName("head")[0].appendChild(mycode);
    }
</script>

就像我阅读here，但插件有时会工作，有时它不起作用。根据google pagespeed，我仍然需要推迟jquery-1.8.3.min.js脚本。如果我以相同的方式推迟它，google pagespeed似乎没问题，但是插件根本不起作用。

我该怎么做？

基于Jamed Donnelly答案的完整解决方案：

我从头部删除了所有.js脚本。然后我在标签之前添加了这个：

<script>
(function() {
    function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
        done=false;
        script.onload=script.onreadystatechange = function(){
        if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
        };
        head.appendChild(script);
    }

getScript("jquery-1.8.3.min.js",function(){
    getScript("jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js", function() {});
    getScript("myCustomScript.js", function() {});
});

})();
</script>

我创建了一个文件myCustomScript.js：

$(document).ready(function(){ 
    $(".example3").fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none'    
    });
});

就是这样。

Answer 1

我一直在使用的是：

(function() {
    function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
        done=false;
        script.onload=script.onreadystatechange = function(){
        if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
        };
        head.appendChild(script);
    }
    getScript("whatever1.js",function(){
        getScript("whatever2.js", function() {});
    });
})();

我会仔细研究，找到我从哪里得到这个。

编辑：找到这个来源没有运气，但它与this article on CSS Tricks非常相似。

在你的情况下，你会做类似的事情：

getScript("jquery-1.8.3.min.js",function(){
    getScript("jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js", function() {});
    getScript("myCustomScript.js", function() {});
});

其中myCustomScript.js是包含文档就绪处理程序的文件。这基本上加载了jQuery，然后一旦加载它然后加载插件和你的脚本。

Answer 2

Never rely on defer因为它是not supported cross-browser。我建议你在</body>之前加载脚本，首先加载库（这就是你在第一时间所做的）。

如何推迟javascript

2 个答案: