DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 實現load加載完成後把圖片一次性顯示出來
實現load加載完成後把圖片一次性顯示出來
編輯:JavaScript綜合知識     

 如何一個load 加載完成後把圖片一次性顯示出來,下面有個不錯的方法,希望對大家有所幫助

方法一:  復制代碼 代碼如下: <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>     
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved