4

something.phpのすべてのコンテンツ(画像、js を含む) が完全に読み込まれるまで、jQueryが DOM$('body').load('something.php');を変更しないようにする方法

-実際のコンテンツは次のとおりです。

Hello world

そしてsomething.php内容は：

image that loads for 10 seconds
20 js plugins

.load() 関数を起動した後、画像と js ファイルが完全に読み込まれるまで何も起こらず、THENコンテンツが即座に変更されます。

一部のプリローダーが表示される場合がありますが、それは問題ではありません。

[編集] - - - - - - - - - - - - - - - - - - - - - - - - -----------------------

そのための私の解決策は、クロスブラウザーの不透明度が 0 の css コード (css は常に dom がビルドされる前にロードされる) でした。

.transparent{
    -moz-opacity: 0.00;
    opacity: 0.00;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
}

また、通常はコンテンツのちらつきを防ぎますが、常にではありません。コンテンツが jQuery ajax によってロードされたことを何らかの方法で検出し、いくつかの表示タイムアウトなどを適用することが可能になりました。しかし実際には、疑問はまだ未解決です。

その質問のもう少し簡単な例を次に示します。

.load('something.php') 関数を起動するリンクをクリックした後、3000ms の遅延で $('body').load('something.php') の後に DOM の変更を開始する方法は? (ブラウザはすぐにダウンロードを開始する必要がありますが、DOM の変更は後で開始する必要があります)

4

4 に答える 4

3

代わりに.getを使用し、成功のコールバックでコンテンツを割り当てます。

$.get('something.php', function(result) {
    $('body').html(result);
});
于 2012-12-04T10:42:35.317 に答える
1

自分で解決しなければならない実装の詳細がいくつかありますが、大まかな解決策は次のとおりです。

  1. .load()直接使用しないでください。すべての画像が読み込まれるのを待つように変更することはできません。

  2. HTML を変数にフェッチするために使用$.get()します。それを と呼びましょうfrag。

  3. すべての画像を検索し、それぞれをプリローダー内に$(frag).find('img').each(fn)ダンプするために使用します。this.src

    var images = [], 
$frag = $(frag),
loaded = 0;

function imageLoaded()
{
    ++loaded;
    // reference images array here to keep it alive
    if (images.ready && loaded >= images.length) {
        // add $frag to the DOM
        $frag.appendTo('#container');
    }
}

$frag.find('img').each(function() {
    var i = new Image();
    i.onload = i.onerror = imageLoaded;
    i.src = this.src;

    images[images.length] = i;
});

// signal that images contains all image objects that we wish to monitor
images.ready = true;

    デモ

  4. すべての画像が読み込まれたら、fragを使用して以前の画像を DOMに追加します$frag.appendTo('#container')。

于 2012-12-04T10:44:00.900 に答える
0

HTMLフラグメントをDOMに挿入する前に関連する画像をロードする概念の簡単な証明を次に示します: http://jsfiddle.net/B8B6u/5/

onload ハンドラーを使用してイメージをプリロードし、反復をトリガーできます。

var images = $(frag).find('img'),
loader = $('<img/>');

function iterate(i, callback) {
    if (i > 0) {
        i--;
        loader.unbind("load");
        loader.load(function() {
            iterate(i, callback);
        });
        loader.attr('src', images[i].src);
    }else{
        callback();
    }
}

iterate(images.length,function(){
    $('#container').html(frag);
});

前の画像の読み込みが完了した後に各画像が読み込まれるため、これは機能するはずです。

于 2012-12-04T11:18:26.937 に答える
0

これを試しましたか？

$(function(){$('body').load('something.php')});

編集：私はあなたが実際にそれが本体に配置される前にロードされるのを待ちたいと思っていることに気付きました.

同様の質問への 3 つのリンクを次に示します。

jQuery による画像のプリロード

ajax/jquery 手法を使用してページ コンテンツをプリロードすることは可能ですか?

PHP と jQuery を使用して画像をプリロードする - コンマ区切り配列?

おそらくそれらをスクリプトに適応させることもできます。

これもうまくいくかもしれません。

  $.ajax({
    'url': 'content.php',
    'dataType': 'text',
    'success': function(data){
        var docfrag = document.createDocumentFragment();
        var tmp = document.createElement('div'), child;
        //get str from data here like: str data.str
        tmp.innerHTML = str;
        while(child = tmp.firstChild){
            docfrag.appendChild(child);
        }
        $('body').append(docfrag);
    }
  });

これは、Shadow Wizard が提案していることを実行するためのより長い方法ですが、おそらくうまくいくでしょう。うーん。どうでも。ジャックの答えは最高に見えます。しばらく待って、誰も私の回答を気に入らなければ削除します。

編集: documentfragments に追加すると、http リクエストを実行できるようです。createDocumentFrament を使用するすべてのスクリプトは、プリロードの恩恵を受ける可能性があります。

この質問では、 createDocumentFragment が行っていることであるにもかかわらず、http リクエストを望んでいません: HTTP リクエストを送信せずに documentFragment を使用して HTML を解析します。

これがすべてのブラウザーに当てはまるのか、console.log が実行されたときだけに当てはまるのかはわかりませんが、この動作が普遍的である場合は、プリロードの適切なオプションになる可能性があります。

于 2012-12-04T10:36:53.337 に答える