サイズの異なる画像で画像のソースを変更すると、IEでサイズが変更されません

Question

JavaScriptを使用して非常に簡単なギャラリーを作成しようとしています。サムネイルがあり、クリックすると大きな画像のソースが更新されます。私がIEでそれを試してみるのを除いて、イメージのサイズは元のイメージのサイズと同じままです。初期画像が200x200で、100x100画像のサムネイルをクリックすると、画像は表示されますが、200x200に拡大されているとします。私は幅や高さの値を設定しないので、ブラウザーはイメージの通常のサイズを使用する必要があります。ここ

は、いくつかのコードです：

function showBigImage(link) 
{ 
var source = link.getAttribute("href"); 
var bigImage = document.getElementById("bigImage"); 
bigImage.setAttribute("src", source); 
return false; /* prevent normal behaviour of <a> element when clicked */ 
} 

とHTMLは次のようになります。大きな画像が動的に作成された

<ul id="gallery"> 
<li> 
    <a href="images/gallery/1.jpg"> 
    <img src="images/gallery/1thumb.jpg"> 
    </a> 
</li> 
    (more <li> elements ...) 
</ul> 

：

function createBigImage() 
{ 
var bigImage = document.createElement("img"); 
bigImage.setAttribute("id", "bigImage"); 
bigImage.setAttribute("src", "images/gallery/1.jpg"); 

var gal = document.getElementById("gallery"); 
var gal_parent = gal.parentNode; 
gal_parent.insertBefore(bigImage, gal); 
} 

ものonclickイベントを設定するいくつかのコードがありますリンク上では、私はそれがこの事実に関連しているとは思わない。私が言ったように、問題はIEだけです。前もって感謝します！

Answer 1

srcが変更されたときに、作成されたときに更新されない場合は、widthとheightの属性が#bigImageに計算されます。他のブラウザはおそらく、画像寸法自体を計算して、srcが変更されたときに再計算する必要があることに気づいているでしょう。どちらのアプローチも十分に妥当です。

画像の適切なサイズはshowBigImage()ですか？あなたが行う場合は、srcを変更すると、その後、明示的widthとheightの属性を設定します。

function showBigImage(link) { 
    var source = link.getAttribute("href"); 
    var bigImage = document.getElementById("bigImage"); 
    bigImage.setAttribute("src", source); 
    bigImage.setAttribute("width", the_proper_width); 
    bigImage.setAttribute("height", the_proper_height); 
    return false; 
} 

新しい次元を知らない場合は、#bigImageを削除し、新しいものを作成するために、showBigImage()を変更：

function createBigImage(src) { 
    var bigImage = document.createElement("img"); 
    bigImage.setAttribute("id", "bigImage"); 
    bigImage.setAttribute("src", src || "images/gallery/1.jpg"); 

    var gal = document.getElementById("gallery"); 
    gal.parentNode.insertBefore(bigImage, gal); 
} 

function showBigImage(link) { 
    var bigImage = document.getElementById("bigImage"); 
    if(bigImage) 
     bigImage.parentNode.removeChild(bigImage); 
    createBigImage(link.getAttribute("href");); 
    return false; 
} 

を