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インスタンスを追加することはできません。

ただし、実行できることは、jQueryを使用dataして画像要素を自分のに関連付けることです。たとえば（インスタンスを参照しているとImageObject仮定）：thisImageObject

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

次に、要素への参照がある場合は、を使用$(img).data("owner")してそれを取り戻すことができます。ImageObjectimage

要素がDOMから削除されると、jQueryは要素に関連付けられたデータをクリーンアップするためdata、単にexpandoプロパティを使用するのではなく、を使用することをお勧めします（削除がjQueryを介して行われる場合）。image代わりにexpandoプロパティを使用した場合（に独自の任意のプロパティを設定するだけimage）、IEでは、プロパティを明示的に設定しない限り、DOMからイメージを削除してimageも、インスタンスもImageObjectインスタンスもクリーンアップされnullません（IEはt DOM要素とJavaScriptオブジェクト間の循環参照を適切に処理します）。

于 2012-07-24T10:32:36.330 に答える
1

作成したDOMオブジェクトをどこかに公開するには、関数を変更する必要があります。現在のところ、これは関数のスコープであり、その関数の外部からはアクセスできない変数にすぎません。

次に、標準のDOMメソッドの1つ（appendChild、insertBeforeなど）を使用します。

カスタムオブジェクトはDOMオブジェクトではないため、ドキュメント自体に追加することはできません。

于 2012-07-24T10:31:35.870 に答える
1

コンストラクターの目的は、オブジェクトを初期化することだけです。また、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");
});
于 2012-07-24T10:45:48.077 に答える
1

ここでは型引数を考慮していません。background-imgが必要な場合は、DIVを参照として渡し、backgroundプロパティを設定する必要があります。

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 に答える
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 に答える
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 に答える