如何一个load 加载完成后把图片一次性显示出来

图片加载方法总结

最新推荐文章于 2023-12-29 17:43:29 发布

原创最新推荐文章于 2023-12-29 17:43:29 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种不同的图片懒加载实现方式，包括使用JavaScript创建Image对象并监听onload事件、利用onreadystatechange事件判断图片加载完成状态以及借助jQuery库实现图片批量加载显示效果。这些方法适用于网页中图片较多时的优化处理。

方法一：

<script type=”text/javascript”>   
 var obj = new Image();    
obj.src = “yourpicurl.jpg”;   
 obj.onload = function()    {                  //这个地方可以重复写入，如果错误的话，换到外面即可                 
document.getElementById(”mypic”).innnerHTML = “<img src=’”+this.src+”‘ />”;    
}    
</script>    
<div id=”mypic”>onloading……</div>

方法二：

<script type=”text/javascript”>    
var obj = new Image();    
obj.src = “yourpicurl.jpg”;    
obj.onreadystatechange = function()    {           
if ( this.readyState == “complete”)          {                //这个地方可以重复写入，如果错误的话，换到外面即可                
document.getElementById(”mypic”).innnerHTML = “<img src=’”+this.src+”‘ />”;          
}    
}   
 </script>    
<div id=”mypic”>onloading……</div>

方法三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
<!--//var total;var curt = 0;$(document).ready(function()
{ 
total = $("#content img").length;    
$("#content img").each(function(){     var image = new Image();  
image.src = $(this).attr('src');  
if (image.complete){  
 imageLoaded();   
} 
 else{ 
  image.onload = imageLoaded;  
 }    
});
});
function imageLoaded(){ 
curt+=1; 
if(curt==total){ 
 $("#content").show(); 
}}//-->
</script>
</head>
<body>
<div id="content" style="display:none;" >    
<img src="" />    
<img src="" />    
<img src="" />
</div>
</body>
</html>