3

Using jquery, I am swapping some content in a web page by use of jquery's .load() function. I want to trigger an event immediately once the content has actually been loaded, but not before and not after. I'm up for any graceful solution! Why? In this instance, I'm doing the old "fade out, swap content, fade in" approach. My problem? I want to fade back in AS SOON AS the new content is loaded.

Caveats:

  • Using a callback function as in $('#object').load(url, callback) triggers as soon as .load() function successfully executes (before the content is actually loaded). Useless here.
  • Using a timed delay for fading back in is not a graceful solution. Very "clunky", especially for those with faster Internet connectivity.
  • JavaScript's onload event trigger does not work, as the element that .load() is altering has already loaded into the HTML DOM.
  • jquery's .ready() function also does not work, as the actual element is already loaded.
  • I do not want to create an onload or .ready() sub-container element, because that's a workaround for what I'm actually trying, though it might be as graceful or more.

How can I fire a function when (and only when) the new .load() content is finally loaded, just like JavaScript's onload event does? Thanks much.

EDIT As it turns out, the jquery .load() function is working flawlessly, and I'm approaching this wrong.

  • Once the .load() function completes successfully, it calls any "callback" function included by the programmer, just like any other jquery function that accepts a callback as one of its "arguments".
  • The .load() function is complete once it either errors or successfully begins the HTML replacement and loading of new content, but that is IT! The content will then take however long it takes to load, but your .load call is already complete before that. Therefore, expecting the callback to run after the .load content has loaded will only disappoint you. ;)

I hope others can learn from this just as I did, including those who thought what I thought was the case. Proof: as stated in the jquery ajax .load page, the callback is executed when the request completes, not when the load completes. Eureka. Whoops. /EDIT

4

3 に答える 3

1

ではなく別の方法を使用してみてください。使用することをおload()勧めしget()ます。このようなものはあなたにとってより便利かもしれません...

var jqxhr = jQuery.get(url,vars);

jqxhr.success(function(data){
    # This will only be called once the remote content has been loaded in
    # The data will then be stored in the data param and can be used within your site
});

jqxhr.error(function(data){
    # Something went wrong, never mind lets just handle it gracefully below...
});

これがあなたの問題の解決策になることを願っています!

詳細については、http://api.jquery.com/jQuery.get/を参照してください。

私はあなたに役立つかもしれない以下のこの関数をすぐに作成しました...それは洗練されていません!

jQuery.fn.loadNewData = function() {

    var object = jQuery(this);
    var jqxhr = jQuery.get(arguments[0]);

    // check for success
    jqxhr.success(function(data) {
        // load the data in
        object.html(data);
    });

    jqxhr.error(function(){
        alert('Failed to load data');
    });
}

これを使用すると、load() 関数を呼び出す方法と同様に呼び出すことができます。

jQuery('#object').loadNewData(url);
于 2012-07-20T23:56:46.543 に答える
0

jQuery.get()およびjQuery.load()の jQuery ドキュメント ページを読むと、コールバック引数は次のように引用されます。

「リクエストが成功した場合に実行されるコールバック関数。」

「要求」と「成功」という用語を強調させてください。リクエストは成功するかもしれませんが、それはコンテンツが読み込まれたという意味ではありません。同じ問題— 関数が私が考えていたように構築されていません。.load()

新しいコンテンツが最終的にロードされたときにイベントをトリガーしたい場合は、別のアプローチを取る必要があります。

  • JSonloadイベントを使用して、HTML 要素を完全に置き換える (置き換えたコードにonloadプロパティを含める) ことでトリガーできます。編集: HTMLiframe要素を使用することは、かなりひどく、原始的で、「ぎこちない」ことに注意してください。新しいコンテンツの読み込みが終了したらすぐに関数をトリガーするより良い方法を見つける必要があります。
  • また、jQuery を使用して.ready()新しいコンテンツの状態を確認することもできますが、(「AFAIK」/私の知る限り)それは、内部コンテンツが変更された既存の HTML 要素ではなく、チェックされたコンテンツが新しいHTML 要素である場合にのみ機能します。 . 既存の要素の jQueryステータスは、新しいコンテンツが読み込まれている場合でも、(AFAIK) 既に「準備完了」として表示されます。おそらく私はこれについて間違っているので、そうであれば訂正したいと思います。.ready()

特に通知がない限り、この回答は正しいものとしてマークされます。元の質問が間違っていたので、それで.load()十分でした。乾杯！

于 2012-07-23T19:20:32.807 に答える
0

あなたが見ているものを誤解している可能性があると思います。使用しているブラウザーによっては、コールバックでアラートをポップアップしてもブラウザーに新しい要素が表示されません。これは、制御をブラウザーに戻すまで DOM が再レンダリングされないためです。これは、DOM から新しい要素を取得してフェードインを開始できないという意味ではありません。次の jsfiddle を使用してください。アラートが発生し、2 番目の div でフェードインします。IE では、2 番目のアラートが発生したときに最初の div が表示されません。これは、コールバック中のロード後の状態だと思いますが、すべてが約束どおり DOM にあったため、[OK] を押すと引き続き機能します。

于 2012-07-23T17:02:55.853 に答える