Insert object (jquery) delay?

Question

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

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?

Answer 1

could this work for you?

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

and BTW you've duplicate ids for myNewImg and imgInner