2011-11-09 18 views
0

xmlの写真リストから 'src'属性のクロスドメインを取得するプロキシアプリケーションがあります。2つの要素を同時にもう1つの要素を要素に追加します

イメージをフルサイズにしたい場合は、presize divのINSIDEを伸ばしずに一様なサイズでレンダリングします。

自分でイメージを追加する方法はわかっていますが、divを作成する方法、イメージをその要素に追加してから、そのdivをimgとともにコンテナに追加する方法はわかりません。

tl; dr; 今、私はこの生産この

$("<img>").attr("src", stuff).attr('class','imgur').appendTo("#content"); 

あります

<div id="content"> 
    <img /> 
    <img /> 
    <img /> 
    <img /> 
</div> 

をそして、私はこの希望:少し私のユースケースを満たすように変更

<div id="content"> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
    <div class="window"><img /></div> 
</div> 

回答:

を 解雇され

HtmlPage.Window.Invoke("imgAdd", p.src); 
System.Threading.Thread.Sleep(20); 

答えて

1
var content = document.getElementById("content"); 
for (var i = 0; i < len; i++) { 
    var img = new Image(); 
    img.src = data[i].stuff; 
    img.classList.add("imgur"); 
    var div = document.createElement("div"); 
    div.classList.add("window"); 
    div.appendChild(img); 
    content.appendChild(div); 
} 

次は、レガシープラットフォームのサポートのためのclassList shimまたはDOM shimが必要になる場合があります試してみてください。

classList shimが必要ない場合は、.classNameを直接操作できます。

.className = "string"または.className += " string"

+0

を確認したいと思うこれは最もよく働く。素晴らしいプレゼンテーションのために、画像は20ミリ秒ごとに1つずつ追加されます。私はsrcの文字列を受け取り、ループを除いて20ミリ秒ごとに呼び出す関数でこれをラップすることができます。 – Wesley

3

var theDiv = $('<div></div>'); 
$('<img>').attr('src', stuff).attr('class', 'imgur').appendTo(theDiv); 
theDiv.appendTo('#content'); 
+2

私は最後の2行を切り替えるので、1回のリフローだけが発生します。 –

+0

@RobW Done。 「リフロー」とは、HTMLページがレイアウトを実行する必要がある回数を制限することですか? – JaredPar

+0

はい、そうです。 –

1
$('#content').append('<div class="window"><img /></div>'); 

しかし、あなたは唯一の均一な大きさを持っている画像が必要な場合は、CSSを移動するための方法です。

+0

しかし、あなたはインラインHTMLを持っています。これは悪い習慣です。 – Raynos

+0

彼は本当に必要なものに依存します。彼はsrcパラメータを使って素敵な小さな関数を作り、コードを多く改良することができました。私は考えを出しただけです。あなたのコードは、同じsrcを持つ多くの画像を追加するのに適しています。 – Shomz

関連する問題