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 t

Answer 1

Did you try use the reference you already have?

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

restoreSize(obj);

Maybe it works

EDIT: You can put a timeout 0 to append your function after the browser render...

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

    setTimeout(function(){ restoreSize(obj) }, 0);

Answer 2

Instead of querying the DOM immediately after appending, just store a reference to the element, then reference that. Like:

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

Also, I could've sworn you can't set an object's key as class since it's a reserved identifier, without quotes...so use "class": "object_image". Also, you had an extra comma after the class value...that's a syntax error, at least in IE.

Answer 3

You cannot access the images width and height until after the images loads. Thats why the setTimeout works for you sometimes. Use the image.load() call back function to trigger the code you require to be run after the image has loaded.

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

Answer 4

u can use load function of jquery. Here is an example with your 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"));
    });  
}

Answer 5

You can do it without jquery, just use the es5 mutation observer and a load event

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

A live example is on jsfiddle

You can read more about MutationObserver at mdn

Answer 6

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