画像のサイズを取得する必要がある場合があります。画像のロード後にロードする必要があります。以下では、編集者は、JS画像がロードされているかどうかを判断するためのいくつかの方法の要約をまとめました。見てみましょう。
1。イベントを読み込みます
<script type = "text/javascript"> $( 'img')。onload = function(){// code} </script>利点:HTMLコードに影響を与えることなく、シンプルで使いやすい。
短所:1つの要素のみを指定でき、Javasciptコードを画像要素の下に配置する必要があります
2。JQUERYメソッド
<script type = "text/javascript"> $(function(){$('。pic1 ')。exl(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"><p id="p">loading...</p><script type = "text/javascript"> img.onreadystatechange = function(){if(img.readystate == "complete" || img.readystate == "loaded"){p.innerhtml = 'readystatechange:loaded'}} </script> </body> </html>ReadyStateは完全でロードされているため、画像がロードされていることを意味します。 IE6-IE10がこのイベントをサポートしていることをテストしますが、他のブラウザーはサポートしていません。
4。IMGの完全な属性
<!doctype html> <html> <head> <meta charset = "utf -8"> <title> img -complete属性</title> </head> <body> <img id = "img1" src = " id = "p1"> loading ... </p> <script type = "text/javascript"> function imgload(img、callback){var timer = setInterval(){if(img.complete){callback(img)clearinterval(timer)}}}}、50)} imgload(img1、function(fentun {p1.innerhtml( 'loaded')})</script> </body> </html>ポーリングは、IMGの完全な属性を継続的に監視します。真実の場合、それは画像がロードされ、ポーリングが停止することを意味します。このプロパティは、すべてのブラウザでサポートされています。
上記のコンテンツは、画像がエディターによって読み込まれているかどうかを判断するJSメソッドの要約です。私はそれが誰にでも役立つことを願っています。同時に、Wulin NetworkのWebサイトへのご支援に感謝します!