금지 <img> 붕괴

Question

먼저 이미지를 제거한 다음 src 속성을 jQuery로 다시 추가하여 이미지를 새로 고쳐야하지만 불행하게도 재설정을 수행하면 이미지가 접히고 아래로 요소가 상하로 이동합니다. , 그것은 꽤 성가시다. 이 문제를 어떻게 피할 수 있습니까?

관련 HTML :

<figure> 
    <figcaption>Result</figcaption> 
    <img title="Result" id="result" src="http://example.com/image.bmp"> 
</figure> 

관련 CSS :

.gallery figure { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.gallery img { 
    min-width: 160px; 
    width: 65%; 
} 

는 당신은 설정해야

Answer 1

뭔가 작동합니다 : 아무것도 내가 그것을 설명 기쁠 것 이해/모호한 보이는

var res = $("#result"); 
res.attr("height", res.height()); //fix the image's height 
res.attr("width", res.width()); //fix the image's width 
var prev = res.attr("src"); //cache the image's src 
res.attr("src", ""); //remove src 
res.attr("src", prev); //reset src to refresh image 

합니다.

편집 : 또 다른 방법은 div로 이미지를 포장하고 div가 고정 된 높이/폭을 가지고 있는지 확인하는 것입니다. 당신의 HTML 같은 모양의이 가정하자 :

<figure> 
    <figcaption>Result</figcaption> 
    <div id = "wrapper"> 
     <img title="Result" id="result" src="http://example.com/image.bmp"> 
    </div> 
</figure> 

자바 스크립트 :

var wrap = $("#wrapper"); 
wrap.css({"height": wrap.height(), "width": wrap.width()}); //fix height and width 
var res = $("#result"); 
var prev = res.attr("src"); //cache the image's src 
res.attr("src", ""); //remove src 
res.attr("src", prev); //reset src to refresh image 

을 내가 도움이되기를 바랍니다!

Answer 2

을합니다 (<figure> 요소는 클래스 = "갤러리"를 가진 <section> 요소에 포함되어 있습니다) width 및 height 이미지 태그에 대한 속성 같은

뭔가 :

<img title="Result" id="result" src="http://example.com/image.bmp" width="250" height="120"> 

당신이 정확한 크기를 알고있는 경우 물론에만 가능합니다.

Answer 3

width 및 height 속성을 이미지에 삽입하여 이미지가 요소에없는 경우에도 크기를 유지할 수 있습니다. 그래서 같이

:

<img src="" width="100" height="200"/> 

이미지 변화의 크기, 내가 HTML의 width 및 height 속성을 떠날 경우. 대신, jQuery에서 src 속성을 변경하려면 먼저 요소의 크기가 유지되도록 이미지의 크기에 대한 img 태그에 width 및 height 속성을 추가하십시오. 그런 다음 다음 이미지가로드되면 해당 속성을 제거하여 새 이미지가 전체 크기로 표시되도록하십시오. 이 같은