Add custom object to the document with JavaScript

Question

I trying to create a custom object that contains image, and then add this object to the document. For example:

function ImageObject(path, name, type) {
   this.name = name;
   this.type = type;
   var img = new Image();
   addListener(img, 'load', function () {
      // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
   });
   img.src = path;
}
var newImg = new ImageObject(test.jpg, 'my test', 'background');

Then I would like to add the object to the document like I add an normal Image and see the loaded image on the page. Something like: $(#container).append(newImg ) . How is it possible to do that? Thanks.

Answer 1

You can add the Image to the page (via jQuery's append or any of several others), but not your ImageObject instance.

What you can do, though, is use jQuery's data to associate the image element with your ImageObject , eg (assuming this refers to the ImageObject instance):

$(img).data("owner", this).appendTo("#container");

Then you can use $(img).data("owner") to get that ImageObject back if you have a reference to the image element.

I suggest using data rather than just using an expando property on the image because jQuery cleans up the data associated with elements when the elements are removed from the DOM (provided the removal is via jQuery). If you used an expando property instead (just setting your own arbitrary property on the image ), on IE, neither the image nor your ImageObject instance would get cleaned up when you removed the image from the DOM unless you explicitly set your property to null (because IE doesn't handle circular references between DOM elements and JavaScript objects properly).

Answer 2

You need to modify the function to expose the created DOM object somewhere. At present it is just a variable that is scoped to the function and is not accessible outside that function.

Then you use one of the standard DOM methods ( appendChild , insertBefore , etc).

Your custom object is not a DOM object and cannot be added to the document itself.

Answer 3

I don't take into account the type-argument here. If you want a background-img, you should pass the DIV as a reference and set the background property.

function ImageObject(path, name, type) {

        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;

        return img;
    }

var newImg = new ImageObject(test.jpg, 'my test', 'background');

$("#container").append( newImg )

Answer 4

You can make your ImageObject() function return the img:

function ImageObject(path, name, type) {
    this.name = name;
    this.type = type;
    var img = new Image();
    addListener(img, 'load', function () {
        // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
    });
    img.src = path;
    return img;
}

Then you should be able to append it to the DOM, as far as I know.

Answer 5

The purpose of a constructor is just to initialize an object. And you also want your custom object the be in control, not jQuery.

I would do like this:

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        this.path = path;
}

ImageObject.prototype.renderTo = function( target ) {
        var img = new Image();
        this.img = img;
        img.src = this.path;
        $(img).load( $.proxy( this.loaded, this )) ;
        $(img).appendTo(target);    
};

ImageObject.prototype.loaded = function(e) {
    this.width = e.currentTarget.width;
    this.height = e.currenTtarget.height;
    //Resize
};

var a = new ImageObject( "image.png", "image", "png" );

$(document).ready(function() {
    a.renderTo("body");
});

Answer 6

Simply add a this.appendTo function in the object.

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;
       this.appendTo = function(id){
             document.getElementById(id).appendChild(img);
            };
    }

var newImg = new ImageObject('test.jpg', 'my test', 'background');
newImg.appendTo("container");