2

IDが「mailToTechOwner」の画像をクリックすると、次のコードが表示されます

$('#mailToTechOwner').live('click', function (e) {
    e.preventDefault();

    var origSource = $(this).attr("src");
    var objDiv = $(this);

      //change image to ajax loader
    objDiv.attr("src", "/Content/Images/ajax-loader.gif");

    $.get("/Project/MailMessage/" + projectId, function (data) {

        //change image back to original
        objDiv.attr("src", origSource);
        window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name;
    });
});

firebug でコードをステップ実行すると問題なく動作しますが、実行するとメール クライアントがポップアップします (私の場合は Outlook) が、画像はまだ ajax loader です。. この行はすでに実行されていますが：

objDiv.attr("src", origSource);

画像の変更が完了するまで電子メールをポップアップ表示しない方法はありますか? src 属性の変更は非同期アクションですか? 他のコードを実行する前に完了したことを確認するためのコールバックはありますか?

4

3 に答える 3

2

画像ソースを置き換える代わりに、両方の画像を HTML に含めてみて、最初はローダーを非表示にします。

GET リクエストでは、元の画像を非表示にしてローダーを表示し、完了時にやり直します。次のようなこともできます：

$(document).on('click', '#mailToTechOwner', function(e) {
    e.preventDefault();
    var loader = $('<img src="/Content/Images/ajax-loader.gif" />'),
        img = $(this)

    img.hide().after(loader);

    $.get("/Project/MailMessage/" + projectId, function (data) {
        loader.remove();
        img.show(1, function() {
            window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name;
        });
    });
});

のネイティブ jQuery コールバックでドキュメントの場所を変更する場所show()。

于 2012-07-22T01:01:50.043 に答える
1 
$('#mailToTechOwner').on('click', function (e) {
    var objDiv = $(this);
    var origSource = objDiv.attr("src");

      //change image to ajax loader
    objDiv.attr("src", "/Content/Images/ajax-loader.gif");
    $.get("/Project/MailMessage/" + projectId, function (data) {
        //change image back to original
        objDiv
            .load(function(){
                console.log('image load triggered',$(this).attr("src"));
                setTimeout(function(){//give some time to see what happens
                    window.location = 'mailto:' + data.Email+ '?subject=Alert' + data.Name;
                    $(this).unbind('load');
                    },1000);
                })
            .attr("src", origSource);
    });

    return false;//prevent default + stop propogation
});

あなたが言ったように、firebugでトレースしながら動作していますが、その理由は、画像がロードされるとすぐにブラウザのリフローの前にwindow.locationがトリガーされる可能性があります。

そして、あなたの最初の質問、はい、画像ソースの変更は非同期であるため、画像の即時読み込みは保証されません。外部 link() の変更は非同期であり、「load」イベントによって追跡できます。

于 2012-07-22T00:46:19.030 に答える
0

load私はこれをテストしていませんが、画像でイベントを試すことができます。

$('#mailToTechOwner').live('click', function (e) {
    e.preventDefault();

    var origSource = $(this).attr("src");
    var objDiv = $(this);

    //change image to ajax loader
    objDiv.attr("src", "/Content/Images/ajax-loader.gif");

    $.get("/Project/MailMessage/" + projectId, function (data) {

         objDiv.load(function() {
            window.location = 'mailto:' + data.Email+ '?subject=Alert';
         });

         //change image back to original
         objDiv.attr("src", origSource);
    });
});
于 2012-07-21T23:55:45.607 に答える