插入对象（jquery）延迟？

我允许用户插入一个对象，一个图像，然后我调用该对象上的一个函数。 什么似乎随机的，有时它工作，有时不，我想这与DOM没有更新呢？

//add a new image function add_image(img) { var objCount = count_objects() + 1; var objId = 'object_'+objCount; var myNewImg = jQuery('
', { id: objId, class: 'object_image invisible', }).appendTo('#objectbox'); //sätt objektnamnet (användaren kan ändra senare) $('#'+objId).attr('namn', objId) //sätt låsta proportioner som standard $('#'+objId).addClass('lockedAspectRatio') //lägg till bilden i detta element var imgInner = jQuery('', { id: objId, class: 'object_image_inner', src: img, }).appendTo( '#'+objId ); window.objectCounter++; prepare_editmode(); //reset the flag and the temporary image field now that image adding is complete $('#imageGhost').val(null); //fixa rätt storlek på bilden setTimeout(function(){ restoreSize(myNewImg,imgInner); $(myNewImg).removeClass('invisible'); }, 1500); } 

因为如果我在一秒左右之后用按钮手动触发最后一个function它总是有效。

 function restoreSize(myImg,imgInside) { if (imgInside == null) { console.log("nothing passed"); var imgInside = $(myImg).find('img'); } else { console.log("passed alright"); } //remove fixed dimensions on containing div $(myImg).css("height", 'auto' ); $(myImg).css("width", 'auto' ); //remove the 100% attribute on the image $(imgInside).css("width", 'auto' ); $(imgInside).css("height", 'auto' ); //get calculated dimensions of div once img original size determines it var newWidth = $(myImg).css("width"); var newHeight = $(myImg).css("height"); //...and set them firmly. $(myImg).css("width", newWidth ); $(myImg).css("height", newHeight ); //restore the height/width 100% property to image in case of new resize $(imgInside).css("width", '100%' ); $(imgInside).css("height", '100%' ); } 

我尝试超时零，结果相同 – 有时图像已加载，有时不是因此随机工作，图像较大（在浏览器中加载时间较长）当然失败的频率更高。 现在我用秒超时绕过了它，但这不是一个很好的解决方案： – /或许我可以在查找（’img’）上放一个循环来继续检查图像并且只在找到后继续进行？ 但有时候这可能会让我陷入无限循环问题？

Answer 1

这对你有用吗？

  function add_image(img) { var objCount = count_objects() + 1; var objId = 'object_' + objCount; var myNewImg = jQuery('
', { id: objId, class: 'object_image invisible' }).appendTo('#objectbox'); $('#' + objId).attr('namn', objId) $('#' + objId).addClass('lockedAspectRatio') var imgInner = jQuery('', { 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); } 

和BTW你有myNewImg和imgInner重复ID

Answer 2

不是在追加后立即查询DOM，只需存储对元素的引用，然后引用它。 喜欢：

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

另外，我可以发誓你不能将对象的键设置为class因为它是一个保留的标识符，没有引号……所以使用"class": "object_image" 。 此外，在class值之后你有一个额外的逗号…这是一个语法错误，至少在IE中。

Answer 3

你可以使用jquery的加载function 。 以下是您的代码示例：

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 = $('
'); var image = $(''); holder.append(image); $("#objectbox").append(holder); image.load(function(){ holder.show('slow'); // alert(image.css("width")); }); } 

Answer 4

您是否尝试使用已有的参考？

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

也许它有效

编辑 ：您可以在浏览器渲染后添加超时0以附加您的function…

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

Answer 5

在图像加载之前，您无法访问图像的宽度和高度。 这就是为什么setTimeout有时适合你。 使用image.load（）回调函数来触发加载图像后运行所需的代码。

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

Answer 6

你可以在没有jquery的情况下完成它，只需使用es5变异观察器和一个load事件

 (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 = ""; }(window)); 

一个现实的例子是jsfiddle

您可以在mdn上阅读有关MutationObserver的更多信息