l'image événement onLoad avant le déclenchement de son image à pleine charge?

Question

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

mais cette fonction est déclenchée avant que l'image est complètement chargée. ce qui est à l'origine de problème. tels que par taille incorrecte de jcropbox ou ne pas montrer jcropbox du tout.

lorsque je place une ligne, il fonctionne très bien. mais n'est pas une solution.     setTimeout('initJcropBox()',2000);

Comment puis-je déclencher la fonction initJcropbox() après l'image est complètement chargée / rendu 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 me trier 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) avec cela. Cela devrait déclencher l'événement de charge sur l'image jusqu'à ce qu'il soit vraiment chargé.

function insertImage(name) {
    var img = $('<img id="cropbox" />');
    img.load(function(){ 
                if (! this.complete) {
                  return false;
                  $(this).load();
                }

                else if (typeof this.naturalWidth != 'undefined' && this.naturalWidth == 0) {
                  return false;
                  $(this).load();
                }
                else
                  initJcropBox();
             })
        .attr('src',name);
    return img;
}

Je ne l'ai pas testé, alors laissez-moi savoir si ça vaut le coup.

Answer 3

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