le déclenchement d'une image se déclenche avant que son image soit complètement chargée?

Question

J'utilise le plugin Jcrop jquery et le déclenchement de la fonction initJcropBox() sur l'événement onload.

mais cette fonction est déclenchée avant le chargement complet de l'image. ce qui pose problème. comme afficher une taille incorrecte de jcropbox ou ne pas afficher jcropbox.

Lorsque je place une ligne, cela fonctionne très bien. mais ce n'est pas une solution. Comment puis-je déclencher la fonction initJcropbox() après le chargement/le rendu complet de l'image dans le navigateur?

var api; 

    function initJcropBox(){ 
     api = $.Jcrop('#cropbox',{ 
      bgColor: 'black', 
      bgOpacity: .7, 
      onSelect: updateCoords, 
      onChange: updateCoords, 
      boxWidth: 400 
     }); 
     api.animateTo([0,0,$('#cropbox').width(),$('#cropbox').height()]); 
    }  

    function insertImage(name) { 
     var img = new Image(); 
     img.onload = initJcropBox; 
     img.src = name; 
     img.id = 'cropbox'; 

     return img; 
    } 

$('td.imageFile').live('click', function(e){ 
    fileWithPath = "uploads/original/" + $(this).text(); 
    $('#cropbox').remove(); 
    $("#cropcontainer").empty().html(insertImage(fileWithPath)); 
}); 

Answer 1

Juste google, je trier moi-même ce problème. voici la solution de travail

function insertImage(name) { 

    var img = new Image(); 
    img.id = 'cropbox'; 
    img.src = name; 

    if(img.complete) setTimeout('initJcropBox()', 500); 
    else onload= initJcropBox; 

    return img; 
} 

Answer 2

Essayez de remplacer votre fonction insertImage(name) par cela. Cela devrait déclencher l'événement de chargement sur l'image jusqu'à ce qu'il soit vraiment chargé. Je n'ai pas testé, alors laissez-moi savoir si ça vaut la peine.

Answer 3

Il y a quelque temps, j'ai eu un problème similaire. Utilisez load() pour charger l'image et pour déclencher une fonction de rappel. Here sont plus de détails.