javascript - 插入对象(jquery)延迟？

Question

我允许用户插入一个对象、一个图像，然后我对该对象调用一个函数。在我看来是随机的，有时有效有时无效，我想这与 DOM 尚未更新有关？

//add a new image
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');

//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('<img/>', {
    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 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%' );    
}

我尝试超时零并得到相同的结果 - 有时图像已加载，有时未加载，因此它随机工作，图像较大(在浏览器中加载时间较长)当然会更频繁地失败。现在我已经用秒超时绕过了它，但这不是一个很好的解决方案:-/也许我可以在 find('img') 上放一个循环，不断检查图像并且只在找到后继续？但这有时可能会使我陷入无限循环问题？

Answer 1

这对你有用吗？

      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);
     }

顺便说一句，您为 myNewImg 和 imgInner

设置了重复的 ID