0

我正在使用 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>

就像我在这里读到的那样，但是插件有时可以工作，有时却不能工作。根据 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'    
    });
});

就这样。

4

2 回答 2

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() {});
    });
})();

我将进行挖掘以尝试找到我从哪里得到这个。

编辑：没有运气找到它的来源，但它与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，然后一旦加载它就会加载插件和您的脚本。

于 2013-05-20T10:17:03.603 回答
0

永远不要依赖，defer因为它不支持跨浏览器。我建议您在底部加载脚本，就在</body>首先加载库之前（这将是您首先所做的）。

于 2013-05-20T10:09:12.907 回答