jQuery - AJAXの前に画像をプリロードする前に画像を添付する

Question

私はそれを単純化することなく、私が使用する関数の完全なコードを表示します。ここでは、次のとおりです。問題がどこにあるかあなたが見ることができますコメントで

function add(z){ 
    bildurl = $(z).attr('data-bildurl'); 
    produktid = $(z).attr('data-produktid'); 


     $.ajax({ 
      type: 'post', 
      url: 'convert.php', 
      async: true, 
      data: {produktid: produktid, bildurl: bildurl}, 
      success: function() { 

       currentid = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 6); 


       currentzindex = currentzindex + 1; 

       $('#baukasten').append(
        '<div class=\"drag\" id="' + currentid + '" style=\"display: inline-block; cursor: all-scroll; z-index: ' + currentzindex + '; position: absolute; border: 1px solid #000000;\" onmousedown=\"mach(this);\"><img src=\"png/' + produktid + '.png" class=\"resize\"><img src=\"close.png\" class=\"close\" style=\"width: 16px; cursor: pointer; position: absolute; top: 5px; right: 5px;\" data-raus=\"' + currentid + '\" onclick=\"raus(this);\"><img src=\"resize.png\" class=\"res\" style=\"width: 18px; position: absolute; bottom: 5px; right: 5px;\" data-res="' + currentid + '"><\/div>' 
       ); // here is the problem 



       $(".drag").draggable({ 
        containment: "#grenze" 
       }); 

       $(".resize").resizable({ 
        maxHeight: 500, 
        maxWidth: 500, 
        minHeight: 50, 
        minWidth: 20, 
        aspectRatio: true, 
        handles: "se", 
        distance: 50 
       }); 
      } 
     }); 
} 

、私はキャッシュをクリアするかどう時にはそれがないに関係なく、時には、問題なく追加されますが、私が呼ぶとき、それは常にこのようなものを追加しますaddと全く同じもので2回。それが常に機能するように私はここで何ができますか？ここでD

Answer 1

は、ソリューションです：：PNG画像がconvert.phpに

を作成なっているので、私は、私は私の問題は、一種の理解しやすいと私の悪い英語のために残念であると思いますAJAX前のPNG画像をプリロードすることはできませんチャンスは0.001％の誰かであっても、

 var image = new Image(); 

     $(image).on('load', function(){ 

      $('#baukasten').append(
       '<div class=\"drag\" id="' + currentid + '" style=\"display: inline-block; cursor: all-scroll; z-index: ' + currentzindex + '; position: absolute; border: 1px solid #000000;\" onmousedown=\"mach(this);\"><img src=\"png/' + produktid + '.png" class=\"resize\"><img src=\"close.png\" class=\"close\" style=\"width: 16px; cursor: pointer; position: absolute; top: 5px; right: 5px;\" data-raus=\"' + currentid + '\" onclick=\"raus(this);\"><img src=\"resize.png\" class=\"res\" style=\"width: 18px; position: absolute; bottom: 5px; right: 5px;\" data-res="' + currentid + '"><\/div>' 
      ); 

      $(".drag").draggable({ 
       containment: "#grenze" 
      }); 

      $(".resize").resizable({ 
       maxHeight: 500, 
       maxWidth: 500, 
       minHeight: 50, 
       minWidth: 20, 
       aspectRatio: true, 
       handles: "se", 
       distance: 50 
      }); 

      $('#lightbox').hide(); 
     }); 

     image.src = "http://www.bla.com/test/png/" + produktid + ".png"; 

    } 
}); 

は今までそれが非常に長く、テストするのは困難であると私は、コード全体を経ていないことが