每天一个JavaScript实例-推断图片是否载入完毕

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 73 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个简单的JavaScript实例，用于监测网页中所有图片是否加载完成。通过设置定时器检查最后一个图片元素的加载状态来判断所有图片是否已加载完毕，并在控制台输出提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
	<head>
  	<meta charset="utf-8">
    <title>每天一个JavaScript实例-推断图片是否载入完毕</title>
    <script>

   
    window.onload=  function(){
 
   			//clearTimeout(clock);
			alert("载入完毕");
		
	}
		var item = document.getElementsByTagName("img");
		
		var clock = setTimeout(function(){
			//var item = document.getElementsByTagName("img");
			//console.log(item);
			//console.log(item.item(item.length-1).onload);
		 	if(item.item(item.length-1).onload == null){
    	 	alert("还没载入完毕呢！");}
    	 },1000)
    
    
    </script>
   </head>

	<body>		
    <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" />			
    <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-300x300.jpg" />		
    <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-2-300x300.jpg" />							 
    <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-3-300x300.jpg" />		
    <img src="http://www.xyzwallpaper.com/wp-content/uploads/2014/07/girl-wallpaper-4-300x300.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903786-shakira-in-the-chair.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903770-red-currant.jpg" />		
    <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903733-failed-surfing.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903738-robert-pattinson.jpg" />		
    <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903728-empty-bench.jpg" />		
    <img src="http://i1.hoopchina.com.cn/blogfile/201401/13/BbsImg138957793449615_500*311.jpg" />		
    <img src="http://bestpaperz.com/data_images/out/40/8903801-snow-park.jpg" />		

	</body>
	</html>