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成功之前的图像追加

回答

相关问题