Question

我尝试创建包含图像的自定义对象，然后将此对象添加到文档中。例如：

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

然后我想将对象添加到文档中，就像添加普通图像并在页面上看到加载的图像一样。类似于：$(#container).append(newImg )。怎么可能这样做？感谢。

Answer 1

您可以将Image添加到页面（通过jQuery的append或其他几个），但不能添加ImageObject实例。

但是，您可以使用jQuery的data将图片元素与ImageObject相关联，例如（假设this引用ImageObject实例）：

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

如果您引用了$(img).data("owner")元素，则可以使用ImageObject来获取image。

我建议使用data而不是仅使用image上的expando属性，因为当从DOM中删除元素时，jQuery会清除与元素关联的数据（前提是通过jQuery删除）。如果您使用了expando属性（只在image上设置了自己的任意属性），那么在IE上删除图像时，image和ImageObject实例都不会被清除除非你明确地将属性设置为null（因为IE不能正确处理DOM元素和JavaScript对象之间的循环引用），否则来自DOM。

Answer 2

您需要修改函数以在某处公开创建的DOM对象。目前它只是一个作用于函数的变量，并且在该函数之外是不可访问的。

然后使用标准DOM方法之一（appendChild，insertBefore等）。

您的自定义对象不是DOM对象，无法添加到文档本身。

Answer 3

我没有考虑这里的类型参数。如果你想要一个background-img，你应该传递DIV作为参考并设置背景属性。

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

您可以让ImageObject（）函数返回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;
}

然后你应该能够将它附加到DOM，据我所知。

Answer 5

构造函数的目的只是初始化一个对象。而且你也希望你的自定义对象可以控制，而不是jQuery。

我会这样做：

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

只需在对象中添加this.appendTo函数即可。

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

使用JavaScript将自定义对象添加到文档中

6 个答案: