때로는 이미지의 크기를 가져와야하며 이미지가로드 된 후로드해야합니다. 아래에서 편집기는 JS 이미지가로드되었는지 여부를 판단하기위한 몇 가지 방법을 요약했습니다. 살펴 보겠습니다.
1.로드 이벤트
<script type = "text/javaScript"> $ ( 'img'). onload = function () {// code} </script>장점 : HTML 코드에 영향을 미치지 않고 간단하고 사용하기 쉬운.
단점 : 하나의 요소 만 지정할 수 있으며 javascipt 코드는 이미지 요소 아래에 배치해야합니다.
2. jQuery 방법
<script type = "text/javaScript"> $ (function () {$ ( '. pic1'). 각 (function () {$ (this) .load (function () {$ (this) .fadein ();});}) </script>$ (document) .ready ()에로드 이벤트를 바인딩하지 마십시오.
장점 : 요소 이벤트는 배치로 바인딩 될 수 있으며 HTML 코드 컨텐츠에 영향을 미치지 않습니다.
단점 : jQuery 라이브러리의 지원이 필요하며 코드는 작동 해야하는 요소 아래에 배치해야합니다.
3. ReadyStateChange 이벤트
<! docType html> <html> <head> <meta charset = "utf -"> <title> img -readystatechange event </title> </head> <body> <img id = "img"src = "http://pic.win.com/wallpaper/f/cbbaea.jpg"> id = "p." "" "PID =" "> type = "text/javaScript"> img.onreadyStateChange = function () {if (img.readystate == "complete"|| img.readystate == "loaded") {p.innerhtml = 'ReadyStateChange : loaded'}} </script> </html>ReadyState가 완료되고로드되어 이미지가로드되었음을 의미합니다. IE6-IE10 이이 이벤트를 지원하지만 다른 브라우저는 그렇지 않습니다.
4. IMG의 완전한 속성
<! docType html> <html> <head> <meta charset = "utf -8"> <title> img- 완전한 속성 </title> </head> <body> <img id = "img1"src = "http://pic1.win4000.com/wallpaper/f/51c3b99a21ea.jpg">. id = "p1">로드 ... </p> <script type = "text/javaScript"> function imgload (img, 콜백) {var timer = setInterval (function () {if (img.complete) {Callback (콜백 (Timer)}}, 50)} img1, function () {p1.innerhtml ( 'loaded')}) </script> </body> </html>폴링은 IMG의 전체 속성을 지속적으로 모니터링합니다. 사실이라면 이미지가로드되고 폴링이 중지되었음을 의미합니다. 이 속성은 모든 브라우저에서 지원됩니다.
위의 내용은 이미지가 편집기에 의해로드되는지 여부를 결정하기위한 JS 메소드의 요약입니다. 모든 사람에게 도움이되기를 바랍니다. 동시에 Wulin Network 웹 사이트에 대한 귀하의 지원에 감사드립니다!