Insérer un délai d'objet (jquery)?

Cela pourrait-il fonctionner pour vous?

  function add_image(img) { var objCount = count_objects() + 1; var objId = 'object_' + objCount; var myNewImg = jQuery('<div/>', { id: objId, class: 'object_image invisible' }).appendTo('#objectbox'); $('#' + objId).attr('namn', objId) $('#' + objId).addClass('lockedAspectRatio') var imgInner = jQuery('<img/>', { id: objId, 'class': 'object_image_inner', src: img }).load(function () { imgInner.appendTo('#' + objId) restoreSize(myNewImg, imgInner); $(myNewImg).removeClass('invisible'); }); window.objectCounter++; prepare_editmode(); //reset the flag and the temporary image field now that image adding is complete $('#imageGhost').val(null); } 

Et BTW, vous avez des ID de duplication pour myNewImg et imgInner

Au lieu d'interroger le DOM immédiatement après l'ajout, enregistrez simplement une référence à l'élément, puis faites référence à cela. Comme:

 var div = jQuery("<div/>", { id: objId, "class": "object_image" }).appendTo("#objectbox"); restoreSize(div); 

En outre, je pourrais avoir juré que vous ne pouvez pas définir la clé d'un objet en tant que class puisqu'il s'agit d'un identifiant réservé, sans guillemets … alors utilisez "class": "object_image" . En outre, vous avez eu une virgule supplémentaire après la valeur de class … c'est une erreur de syntaxe, au moins dans IE.

Vous pouvez utiliser la fonction de chargement de jquery. Voici un exemple avec votre code:

http://jsfiddle.net/UhUb7/

  var images = [ "http://upload.wikimedia.org/wikipedia/commons/4/4b/Apple_pie.jpg" ] $(document).ready(function(){ addImage(images[0]); }); function addImage(url){ var holder = $('<div class="object_image invisible">'); var image = $('<img src="'+url+'" />'); holder.append(image); $("#objectbox").append(holder); image.load(function(){ holder.show('slow'); // alert(image.css("width")); }); } 

Avez-vous essayé d'utiliser la référence que vous avez déjà?

 var obj = jQuery('<div/>', { id: objId, class: 'object_image', }).appendTo('#objectbox'); restoreSize(obj); 

Peut-être que ça fonctionne

EDIT : Vous pouvez mettre un délai 0 pour ajouter votre fonction après le rendu du navigateur …

 var obj = jQuery('<div/>', { id: objId, class: 'object_image', }).appendTo('#objectbox'); setTimeout(function(){ restoreSize(obj) }, 0); 

Vous ne pouvez pas accéder aux images en largeur et en hauteur jusqu'à ce que les images soient chargées. C'est pourquoi le setTimeout fonctionne parfois pour vous. Utilisez la fonction image.load () call back pour déclencher le code que vous devez exécuter après l'importation de l'image.

  var imgInner = jQuery('<img/>', { src: img }).load(function () { jQuery(this).appendTo('#' + objId) restoreSize(myNewImg, this); //and so on }); 

Vous pouvez le faire sans jquery, utilisez simplement l'observateur de mutation es5 et un événement de chargement

 (function (global) { "use strict"; if (!("MutationObserver" in global)) { global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver; } function loadImage(e) { var img = e.target, width = img.clientWidth, height = img.clientHeight; img.removeEventListener('load', loadImage, false); alert("Image loaded: width: " + width + " height: " + height); } var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { switch (mutation.type) { case 'childList': Array.prototype.forEach.call(mutation.target.children, function (child) { if (child.id === "smiley") { child.addEventListener('load', loadImage, false); } }); break; default: } }); }); var container = document.getElementById("container"); observer.observe(container, { childList: true, characterData: true, subtree: true }); container.innerHTML = "<img id='smiley' src='http://1.bp.blogspot.com/-b1Z0R5ExM9s/TdWbeGQ-wdI/AAAAAAAAAPI/Ft52XTSxs0s/s1600/blue+sky+wallpaper+%25289%2529.jpg'/>"; }(window)); 

Un exemple en direct est sur jsfiddle

Vous pouvez en savoir plus sur MutationObserver chez mdn