jQuery - предварительная загрузка изображения внутри AJAX success before append

Я покажу вам полный код функции, которую я использую, не упрощая ее, потому что, когда я упрощаю это, все работает нормально. Вот оно:jQuery - предварительная загрузка изображения внутри AJAX success before append

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 дважды с точно таким же материалом. Что я могу сделать здесь, чтобы он всегда работал? Я не могу предварительно загрузить изображение PNG перед AJAX, потому что изображение PNG становится создан в convert.php

Я надеюсь, что моя проблема отчасти понятно и простите за мой плохой английский: 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 success before append

ответ

Смежные вопросы