0

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

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 )。怎么可能做到这一点？谢谢。

4

6 回答 6

2

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

但是，您可以做的是使用 jQuerydata将图像元素与您的 相关联ImageObject，例如（假设this指的是ImageObject实例）：

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

然后，如果您有对该元素的引用，则可以使用$(img).data("owner")它来取回它。ImageObjectimage

我建议在 DOM 上使用data而不是仅使用 expando 属性，image因为当从 DOM 中删除元素时，jQuery 会清理与元素关联的数据（前提是通过 jQuery 进行删除）。如果您改为使用 expando 属性（只是image在t 正确处理 DOM 元素和 JavaScript 对象之间的循环引用）。imageImageObjectnull

于 2012-07-24T10:32:36.330 回答
1

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");
});
于 2012-07-24T10:45:48.077 回答
1

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

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

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

于 2012-07-24T10:31:35.870 回答
1

您可以让 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，据我所知。

于 2012-07-24T10:39:08.413 回答
1

我不考虑这里的类型参数。如果你想要一个 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 )
于 2012-07-24T10:34:42.560 回答
0

只需 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");
于 2012-07-24T10:39:31.630 回答