0

$(window).Load() で画像をフェードインしていますが、うまく機能しますが、ソーシャル共有をオンにしている場合、ソーシャル ネットワーク スクリプトに問題が発生し、読み込みに 10 秒以上かかることがあります。スクリプトが読み込まれるまでフェードインしないでください!

以下にソーシャルスクリプトを無視させる方法はありますか?

$(window).load(function() {
   images.fadeIn('slow');
});

読み込まれるソーシャル スクリプトは、「共有」ボタンを表示するために必要なもので、Facebook、Twitter、Pinterest、StumbleUpon、Google+ が含まれます。ほんの数秒前に、「pinterest」スクリプトの読み込みがスタックし、それを読み込むコードが「非同期」になっているため、他に何ができるかわかりません。

4

1 に答える 1

1

2 つのオプション:

1 - window.load を待たない

ウィンドウの読み込みを待つのではなく、代わりに画像の読み込みを探すことができます。たとえば、HTML の画像の下で次のスクリプトを使用する (または jQuery のreadyイベントを使用する):

(function() {
    var imgs = $("selector for the images you care about");
    var done = false;

    // Hook both load and error events on the images    
    imgs.on("load error", check);

    // We may well have missed some, so do a proactive check
    check();

    function check() {
        var count = 0;
        if (!done) {
            imgs.each(function() {
                if (this.complete) {
                    ++count;
                }
            });
            if (count === imgs.length) {
                done = true;
                imgs.off("load error");
                // Do your effect
            }
        }
    }
})();

loadイベントをフックする前にすでに発生している可能性があるため、イベントの取得に依存していないことに注意してください。loadそのため、すべての読み込みイベントを見逃した場合に備えて最初のチェックを行い、関連する画像が表示されたときに、またはerror関連する画像から再度チェックします。

2 - 関連するスクリプトを非同期でロードする

マークアップでタグを使用するのではなく、要素を DOM に<script>追加して、待ちたくないスクリプトを追加します。この方法で追加されたスクリプトは非同期に読み込まれ、イベントscriptを遅らせません。window.load

例えば：

(function() {
    var scripts = [
        "http://example.com/some/script.js",
        "http://example.com/some/another_script.js",
        "http://example.com/some/script3.js"
    };
    var index, script;
    var parent = document.getElementsByTagName("script")[0].parentNode;

    for (index = 0; index < scripts.length; ++index) {
        script = document.createElement("script");
        script.src = scripts[index];
        parent.appendChild(script);
    }
})();
于 2013-10-14T10:00:22.700 に答える