4

この例があります。フォームを送信するときに、画像ファイルを読み込んで、画像が読み込まれるまで待つ必要がありますreturn true（この場合はフォームを送信します）

例えば

$('#myform').submit(function(){
  var image=document.createElement('image')  
  var src=document.createAttribute('src')
  image.value="http://example.com/image.jpg"
  image.setAttributeNode(src);
  document.body.appendChild(image);
})

ここでreturn true、フォームが送信される場合（画像は読み込まれません）、送信されfalseない場合（画像は読み込まれますが、フォームは送信されません）。画像が読み込まれた後にtrueを返すコードを作成するにはどうすればよいですか。

4

3 に答える 3

3

ここで注意しなければならない重要な概念があります。特定のイベントが発生したときに実行されるイベントハンドラー関数を追加すると、イベントハンドラー関数の値はreturn実際にはどこにも行かず、何にも渡されません。イベントリスナーは、将来の未知の時点でイベントハンドラー関数を呼び出すために作成されますが、通常のスクリプト実行は完全に線形であり、スクリプト内のコマンドの順序で実行されます。したがって、アプリケーションの機能をある方法で定義するのが最善です。特定のイベントが発生した場合にのみ、このような特定のアクションを実行すること。

上記の質問のように、フォームが最初に送信されたときにリッスンする1つのイベントハンドラーを定義しているので、それをすべてを開始する最初のイベントと見なします。あなたが説明する提出プロセスを私がどのように処理するかを次に示します。

//wrap the form element in jQuery and cache it so we don't work to re-select it
var $myform = $('#myform');

//specify that we are listening for -when- the form is submit
$myform.on('submit', function(event){
    //prevents the form from actually submitting when submit is first clicked
    event.preventDefault();

    //Simpler image construction
    var image = new Image();
    document.body.appendChild(image);

    //remember to listen for the image's load event before assigning a source
    $(image).on('load', function(){
        //this function is invoked in the future,
        //when the image load event has been fired

        //this bit actually submits the form via GET or POST
        $myform.submit();
    });

    //an image's `src` attribute can be set directly via the`src` property
    image.src = "http://placekitten.com/320/240";
});

JSFiddleでのこの作業の例：

http://jsfiddle.net/Admiral/uweLe/

jQueryの.on()メソッドを読んで、現在推奨されているイベントバインディングのメソッドについての洞察を得ることをお勧めします。これにより、状況が少し明確になるはずです。

http://api.jquery.com/on/

幸運を！

于 2013-03-25T00:45:06.777 に答える
2

onload画像でまたはjquery loadイベントを使用して、コールバックでフォームを送信できます。次に、さらに長く待機したい場合は、コールバックにタイムアウトを追加することもできます。

何かのようなもの：

$('#myform .submitButton').click(function(e){
  e.preventDefault();

  var image=document.createElement('image');

  $(image).load(function(){

    //Submits form immediately after image loaded.
    $('#myForm').submit();  

    // Submits form 1 second after image has loaded
    setTimeout(function(){ $('#myForm').submit(); }, 1000); 
  });

  var src=document.createAttribute('src');
  image.value="http://example.com/image.jpg";
  image.setAttributeNode(src);
  document.body.appendChild(image);
})

注：私の例では、submitイベントをイベントに変更しましたclick。false必要に応じて送信を使用することもできますが、戻ったり使用したりしている限り、おそらく機能しますpreventDefault。

于 2013-03-25T00:05:57.943 に答える
0

imagesLoadedPACKAGEDv3.1.8を使用しています

あなたはgithubでそれを見つけることができます： https ：//github.com/desandro/imagesloaded

彼らの公式サイト：http： //imagesloaded.desandro.com/

于 2014-10-20T04:46:57.190 に答える