jQuery worksページの3/4がロードされています

Question

私は、プラグインによって生成されたサムネイルタイルを取得し、それをDOMのどこかに投げるjQuery関数を持っています。この機能は半分の時間で機能します。

私がこのようにしなければならなかったのは、プラグインがページの読み込み時にHTMLの半分を自動的にレンダリングし、CSSソリューションがひどいためです。私は容器をお互いにあふれさせなければならなかった。それはひどいハッキーだった。

プラグインはサムネイル付きの画像です。サムネイルがクリックされるたびに、対応する写真がメインの画像枠内に表示されます。

コード：

setTimeout(function(){ 
    $('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider 
    $('ol').appendTo($('#thumb-area')) 
}, 2000); 

それはsetTimoutである理由、それはプラグインがコードを生成する際に遅延があると思われます。残念ながら、プラグインは全体的なテーマの一部であり、コードを投稿することができないので、あいまいなアイデアを歓迎します。

Answer 1

私はMutationObserverがおそらく最良のアプローチであることに同意します。

これを処理する別の方法は、DOMがあなたのために準備ができていない場合に変換を再試行する機能を持たせることです。このような何か：

function transformThumbnails(iteration) { 
    if (iteration === undefined) { 
    iteration = 0; 
    } 
    else if (iteration < 100) { // don’t retry forever 
    var isReady = true; // TODO: test if DOM is ready for your transformation 
    if (isReady) { 
     $('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider 
     $('ol').appendTo($('#thumb-area')) 
    } 
    else { 
     // not ready, so retry 
     setTimeout(function(){transformThumbnails(iteration + 1);}, 100); 
    } 
    } 
} 
transformThumbnails(); // kick it off