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のページ速度は問題ないように見えますが、プラグインはまったく機能しません。

どうすればいいですか？

Jamed Donnelly の回答に基づく完全なソリューション:

head からすべての .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 に答える