때로는 이미지의 크기를 가져와야하며 이미지가로드 된 후에 만로드해야합니다. 방법을 찾으시겠습니까?
1.로드 이벤트
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> IMG-로드 이벤트 </title>
</head>
<body>
<img id = "img1"src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> 로딩 ... </p>
<script type = "text/javaScript">
img1.onload = function () {
p1.innerhtml = '로드'
}
</스크립트>
</body>
</html>
테스트, 모든 브라우저는 "로드"를 표시하여 모든 브라우저가 IMG로드 이벤트를 지원한다는 것을 나타냅니다.
2. ReadyStateChange 이벤트
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> IMG- ReadyStateChange 이벤트 </title>
</head>
<body>
<img id = "img1"src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> 로딩 ... </p>
<script type = "text/javaScript">
img1.OnreadyStateChange = function () {
if (img1.readystate == "complete"|| img1.readystate == "loaded") {
p1.innerhtml = 'readystatechange :로드'
}
}
</스크립트>
</body>
</html>
ReadyState가 완료되고로드되어 이미지가로드되었음을 의미합니다. IE6-IE10 이이 이벤트를 지원하지만 다른 브라우저는 그렇지 않습니다.
III. IMG의 완전한 속성
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> img- 완전한 속성 </title>
</head>
<body>
<img id = "img1"src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> 로딩 ... </p>
<script type = "text/javaScript">
함수 imgload (img, 콜백) {
var timer = setInterVal (function () {
if (img.complete) {
콜백 (IMG)
ClearInterval (타이머)
}
}, 50)
}
imgload (img1, function () {
p1.innerhtml ( '로드')
})
</스크립트>
</body>
</html>
폴링은 IMG의 전체 속성을 지속적으로 모니터링합니다. 사실이라면 이미지가로드되고 폴링이 중지되었음을 의미합니다. 이 속성은 모든 브라우저에서 지원됩니다.