2017-03-09 12 views
0

AJAX呼び出しでコンテンツを読み込もうとしていて、コンテンツが読み込まれた後に別のアクションを実行しています。私の例では、後者のアクションは単なる警告ですが、実際の例では入力フィールドに集中しようとしています。jQuery .load()コールバック

$("#box").load("/favicon.png", function(response) { 
    alert('do after the load'); 
}); 

https://jsfiddle.net/u0cmmn5h/

ファビコンが実際にロードされる前に、あなたは、フィドルに警告火を見ることができるように。コンテンツが読み込まれた後にファンクションが起動しないのですか?

+0

「アラート」などのOSポップアップは、侵入型でブロックされているために設計が悪いため、特定のユーザーアクションが実行されない限りページコードの実行は継続されません。可能であれば、カスタムソリューションを使用してください。ですから、あなたの場合は、テスト目的のために 'console.log( 'loadの後に行う');といっしょに行ってください。 –

+0

[Promises](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise)または[jQueryの同等のDeferredオブジェクト](https://api.jquery)で関数をラップすることができます.com/jQuery.Deferred /)。これにより '.then(function(){}) 'などで連鎖可能になります。 JavaScriptコードが解決されると、画像が画面に表示される正確な時刻ではない可能性があります。 –

答えて

2

上のコールバックは、HTTP応答に実行しない画像は、クライアント側レンダリングされるとき。

+0

入手しました。私は代わりにここで$ .ajax()を使うべきだと思います。私はそれを$ .ajax()に変更し、イベント(この場合は警告)をajax()リクエストの成功とすると、約束を実装する必要がありますか? –

+0

私の質問を示すためにフィドルを更新しました:https://jsfiddle.net/u0cmmn5h/2/ –

0

画像にloadを使用した例です。 divにloadの情報がありません。

src属性が変更され、イメージが正常に読み込まれると、loadメソッドが実行されます(実行に失敗した場合はメモ)。

.load() jQuery

それとすべてのサブ要素が完全にロードされたときに負荷イベントが要素に送られます。このイベントはURLに関連付けられた要素(画像、スクリプト、フレーム、iframe、およびウィンドウオブジェクト)に送信できます。

$(function() { 
 
\t $('img').load(function() { 
 
    \t alert('done after load'); 
 
    }).attr('src', '/favicon.ico'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="box"> 
 
    <img /> 
 
</div>

​​