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 속성입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
