크기가 다른 이미지로 소스를 변경하면 IE에서 크기가 조정되지 않습니다

Question

자바 스크립트를 사용하여 매우 간단한 갤러리를 만들려고합니다. 미리보기 이미지가 있으며 이미지를 클릭하면 큰 이미지의 소스가 업데이트됩니다. 모든 것은 IE에서 시도 할 때를 제외하고는 이미지의 크기가 원래 이미지의 크기와 동일하게 유지되는 경우를 제외하고는 정상적으로 작동합니다. 초기 이미지가 200x200이고 100x100 이미지의 썸네일을 클릭하면 이미지가 표시되지만 200x200로 축소됩니다. 난 너비 또는 높이 값을 설정하지 않으므로 브라우저에서 이미지의 일반 크기를 사용해야하며, 예를 들어 FF로 설정해야합니다. 여기

는 일부 코드입니다 :

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

또한 온 클릭 이벤트를 설정하는 몇 가지 코드있다 링크에,하지만이 situaltion 관련이 있다고 생각하지 않습니다. 내가 말했듯이 문제는 IE에만 ​​있습니다. 미리 감사드립니다! IE는 src가 변경 될 때이를 업데이트되지 다음이 생성 될 때 #bigImage의 width 및 height 특성을 계산하고있는 것처럼

Answer 1

는 소리. 다른 브라우저는 아마도 이미지 크기 자체를 계산해야하므로 src이 변경 될 때 이미지 크기를 다시 계산해야한다는 점에 유의해야합니다. 두 방법 모두 충분히 합리적입니다.

showBigImage() 안에 이미지의 적절한 크기를 알고 계십니까? 새 크기를 알 수없는 경우

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()을 변경하고 만들 : 당신이 할 경우, 당신은이 src 변경할 때 width 및 height 명시 적 특성을 설정

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; 
}