jQuery - preload Bild in AJAX Erfolg vor dem Anhängen

Ich werde Ihnen den vollen Code der Funktion, die ich benutze, ohne es zu viel zu vereinfachen, weil, wenn ich es zu vereinfachen alles gut funktioniert. Hier ist sie:jQuery - preload Bild in AJAX Erfolg vor dem Anhängen

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 
       }); 
      } 
     }); 
}

Im Kommentar Sie sehen können, wo das Problem ist, manchmal hängt es ohne ein Problem, manchmal nicht egal, ob ich den Cache löschen oder nicht, aber es immer diese Sachen anhängen, wenn ich rufe add zweimal mit genau dem gleichen Zeug. Was kann ich hier tun, damit es immer funktioniert? Ich kann das PNG-Bild vor AJAX nicht vorzuladen, weil das PNG-Bild wird

in convert.php erstellt immer ich hoffe, dass mein Problem Art verständlich ist und sorry für mein schlechtes Englisch: D

Quelle

2017-02-21 Eddy Unruh

ich habe nicht durch den ganzen Code gegangen, da es ziemlich langwierig und schwer zu testen ist. Aber es klingt wie ein Problem mit dem Bild wird nicht geladen? Haben Sie daran gedacht, waitForImages zu versuchen - https://github.com/alexanderdickson/waitForImages? –

Danke für die Antwort, hast du das Update gesehen? Wenn ich $ (".drag") .raggable ({und $ (".resize") .draggable ({mit einem 1-Sekunden-Timeout) aufruft, dann funktioniert es gut, es wird ausgeführt, nachdem das Image vollständig geladen ist, aber wie könnte ich das machen Nur wenn der AJAX-Erfolg zu 100% abgeschlossen ist, ist append usw. abgeschlossen –

Hier ist die Lösung:

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

    } 
});

auch wenn die Chance 0,001% jemand jemals braucht, ist es xD

Quelle

2017-02-21 23:04:13

jQuery - preload Bild in AJAX Erfolg vor dem Anhängen

Antwort

Verwandte Themen