javascript img onload()

로드 된 이미지의 크기 조정 작업을 트리거하기 위해 onload 함수를 사용하고 있습니다. <img> 그러나 하나의 웹 페이지에 동일한 "src"가있는 두 개 이상의 <img>이있는 경우 이미지가 동일하고 후자는 <img>의 onload() 함수가 호출되지 않습니다. 동일한 <img>이있는 경우에도 <img>이 모두 제대로 조정되었는지 확인하는 방법은 무엇입니까?javascript img onload()

감사합니다.

출처

2011-12-30 Bin Chen

현재 코드는 무엇입니까? – Purag

img 태그에'.src' 속성이 설정되기 전에'.onload' 핸들러가 설정되면 이미지가 브라우저 캐시에서 온 경우에도 onload 핸들러가 작동해야합니다. '.src'를 먼저 설정하면 (또는 페이지의 HTML에 이미 설정되어있는 경우)'.onload'를 설정하면 너무 늦을 수 있습니다. – jfriend00

@ jfriend00 코드를 사용하여 을 바인딩하십시오. 설명에 해당하는 효과는 무엇입니까? –

브라우저가 실제로 첫 번째 이미지를 캐시하고 있기 때문에 이러한 현상이 발생합니다. 따라서 동일한 "src"를 다시로드하려고 시도하면 로컬로 캐싱되고 실제로 onload가 실행되지 않습니다. 항상로드되도록하려면 쿼리 문자열에 고유 한 값을 추가 할 수 있습니다.

출처

2011-12-30 05:05:45 John

대신 각 <img/>에 대해 별도의 onload 핸들러를 사용하는 이유뿐만 아니라 window에 대해 하나의 onload 이벤트를 사용할 수 있습니까? 이 이벤트는 (모든 이미지와 마찬가지로)이로드 된 후에 실행되므로 단일 핸들러에서 각 이미지를 처리 할 수 있습니다. 예 :

function processAllImages() 
{ 
    var imgElts = document.getElementsByTagName('img'); 
    for (var i=0; i<imgElts.length; i++) 
    { 
     processImage(imgElts[i]); // TODO write this function 
    } 
} 

window.onload = processAllImages;

출처

2011-12-30 05:17:57

레이아웃을 수행하기 위해 내 코드가 각 이미지의 너비와 높이를 계산해야하기 때문에 그럴 수 없습니다. 일부 이미지는 매우 느리게로드됩니다. –

나는 이전에 비슷한 질문을했습니다.
체크 아웃 : Javascript/jQuery: How to detect img is fully downloaded or not?

요약하면 img 태그의 'complete'속성을 사용할 수 있습니다.
로드 이벤트를 바인딩하기 전에 확인하십시오.

출처

2011-12-30 06:56:18 Sang

javascript img onload()

답변

관련 문제