jQuery的 - 預先加載AJAX成功之前的圖像追加

我要告訴你我使用的功能的完整代碼，而不是簡化它太多，因爲當我簡化它的一切工作正常。那就是：jQuery的 - 預先加載AJAX成功之前的圖像追加

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兩次完全相同的東西。我可以在這裏做些什麼來使它始終有效？我不能預裝AJAX之前PNG圖像，因爲在convert.php

越來越創建PNG圖像，我希望我的問題是一種可以理解的，對不起我的英文不好：d

來源

2017-02-21 Eddy Unruh

我沒有經歷過整個代碼消失了，因爲它是相當漫長和難以測試。但這聽起來像是圖像沒有加載的問題？你有沒有想過嘗試waitForImages - https://github.com/alexanderdickson/waitForImages？ –

感謝您的回覆，您是否看到更新？當我調用$（「.drag」）.draggable（{和$（「.resize」）.draggable（{像1秒超時那麼它工作正常，它會在映像完全加載後執行，但我怎麼做它只是當AJAX的成功只是100％完成？這意味着追加等完成 –

這裏是解決方案：

 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"; 

    } 
});

即使機會是0.001％的人永遠都需要吧XD

來源

2017-02-21 23:04:13

jQuery的 - 預先加載AJAX成功之前的圖像追加

回答

相關問題