>  기사  >  웹 프론트엔드  >  img onload 이벤트 바인딩은 모든 브라우저에서 실행될 수 있습니다_기본 지식

img onload 이벤트 바인딩은 모든 브라우저에서 실행될 수 있습니다_기본 지식

WBOY
WBOY원래의
2016-05-16 17:46:011261검색

img의 onload 이벤트를 바인딩해야 할 때 일반적으로 모든 사람은 다음과 같은 기존 방법을 사용하여 이벤트를 바인딩한다고 생각할 것입니다.

코드 복사 코드는 다음과 같습니다.





img 온로드 이벤트 바인딩(잘못된 사용법) >< script type='text/javascript'>
window.onload = function(){
var img = document.getElementById('imgId')
img.onload = function();
경고(1);
};






이때 해당 알림(1 )이 실행되지 않습니다. 이유는 무엇입니까? 특히 ie 및 ff 브라우저에서는 더욱 그렇습니다.
그리고 jquery 플러그인 라이브러리를 사용하면 IE 및 Opera 브라우저에서는 경고가 팝업되지 않지만 다른 브라우저에서는 팝업되는 이유는 무엇입니까? !
주로 window.onload 이벤트는 페이지 dom 요소가 로드된 후에 실행되며, 여기에는 img 이미지의 src 로딩 완료도 포함됩니다. 그러면 img.onload는 실행되지 않습니다.
img의 src가 로드되었는지 모니터링 중이기 때문입니다.
그렇다면 onload 이벤트를 img 이미지에 어떻게 바인딩할까요? 구체적인 코드는 다음과 같습니다.




코드 복사
코드는 다음과 같습니다. < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http:/ /www.w3.org/1999/xhtml">
img onload 이벤트 바인딩(올바른 사용법)
🎜>

/html>


이 메소드는 모든 브라우저에서 경고(1)를 실행합니다.
즉, 페이지의 dom 요소가 로드된 후 img의 dom 객체를 얻고 src 속성을 얻은 다음 src를 ''empty로 설정하고 img의 onload 이벤트를 수신하고 마지막으로 img의 src 속성입니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.