1.onload事件
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg"> <p id="p1">loading...</p> <script type="text/javascript"> img1.onload = function () { p1.innerHTML = 'loaded' } </script> </body> </html>
所有浏览器都支持img的load事件
2.img的complete事件
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - complete attribute</title> </head> <body> <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg"> <p id="p1">loading...</p> <script type="text/javascript"> function imgLoad(img, callback) { var timer = setInterval(function () { if (img.complete) { callback(img) clearInterval(timer) } }, 50) } imgLoad(img1, function () { p1.innerHTML = "加载完毕" }) </script> </body> </html>
定时器判断是否加载完成