插入对象(jQuery)延迟? [英] Insert object (jquery) delay?

问题描述

我允许用户插入一个对象，一个图像，然后在该对象上调用一个函数.在我看来，什么是随机的，有时有效，有时无效，我想这与DOM还没有更新有关?

I allow the user to insert an object, an image, and then i call a function on that object. What seems randomly to me, sometimes it works and sometimes not, I guess it has to do with the DOM not being updated yet?

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

}

因为如果我在一秒钟后用一个按钮手动触发了最后一个功能，那么它将始终有效.

Because if I manually trigger that last function with a button after a second or so it always works.

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')上放一个循环，该循环不断检查图像并仅在找到后进行处理?但这有时会使我陷入无限循环的问题吗?

I tries timeout zero with same result - sometimes the image has been loaded and sometimes not so it works randomly, with larger images (taking longer time to load in browser) it of course fails more frequently. Right now I have bypassed it with a seconds timeout but that ain't no pretty solution :-/ perhaps I could put a loop on the find('img') that keeps checking for the image and only proceeds once found? But that might stick me in an infinite loop problem at some times?

推荐答案

这对您有用吗?

      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

and BTW you've duplicate ids for myNewImg and imgInner

这篇关于插入对象(jQuery)延迟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！