emu in blogjava
          
				
          
			          		
		
          
	
          

          

          
	
          
		
          
			
 
BlogJava ::
首頁 ::
新隨筆 ::
聯系 ::
聚合
 ::
管理 ::


			
			
				

          
	
          
		
          
			
			
			
				 
				171 
				隨筆 ::
				103 文章
				::
				1052 評論
				::
				2 Trackbacks
			
		
          
	
          

          

			          		
		
          
	
          

          


          


          
	
					

          
	
	
	
          
		今天是發現bug的高產期。

          IE在解析innerHTML的時候居然會忽略Cache策略，簡單的重復加載圖片。請看以下代碼：

          

          <HTML>
          <HEAD>
          <BODY>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">"
          var ar = new Array(101);
          window.onload          =function(){
              document.body.innerHTML           = ar.join(st);
          }
          //-->
          </SCRIPT>
          </BODY>
          </HTML>

          保存到本地作為一個htm文件，然后用IE打開（允許腳本運行），然后用http監視工具可以看到，IE發起了100個請求，一個都不cache！

          在FireFox下面就沒有問題，只發起一個請求。
	
          
	
	
          
		posted on 2006-03-01 22:39 emu 閱讀(5104) 評論(8)  編輯  收藏  
	
          

          







          
	    
    


          

          
	
          評論
          
		
		
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2006-03-02 01:55
							
						qwang
					
          
					
          
						用這段代碼可以解決這個問題

          

          <html> 

          <head> 

          <script language=javaScript> 

                  var imageholder=new Image() 

                  imageholder.src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif" 

          </script> 

          </head> 

          <body> 

          <div id="div1"></div> 

          <script language=javaScript> 

                  document.getElementById("div1").innerHTML = 

                  "<img id='p1'><img id='p2'><img id='p3'>"; 

                  document.getElementById("p1").src=imageholder.src; 

                  document.getElementById("p2").src=imageholder.src; 

                  document.getElementById("p3").src=imageholder.src; 

          </script> 

          </body> 

          </html>  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2006-03-02 09:16
							
						emu
					
          
					
          
						逐個 document.getElementById("p1").src=imageholder.src;  是沒有問題，問題是把圖片的完整html一次全部寫入innerHTML造成的。  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2006-03-02 09:44
							
						emu
					
          
					
          
						這個bug的官方描述見： 

          

          http://support.microsoft.com/default.aspx?scid=kb;en-us;319546 

          

          此外 http://www.bazon.net/mishoo/Articles/msie/958/ 指出background-image會帶來一樣的問題。 

          

          ms的官方解決方案是象這樣： 

          

          <HTML> 

          <HEAD> 

          <BODY> 

          

          <SCRIPT LANGUAGE="JavaScript"> 

          <!-- 

          var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">" 

          var ar = new Array(101); 

          function test(){ 

          document.getElementById("d").innerHTML = ar.join(st); 

          document.getElementById("d").style.display="block"; 

          } 

          setTimeout("test()",1000); 

          //--> 

          </SCRIPT> 

          <div id="d"><img src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif"></div> 

          </BODY> 

          </HTML>

          

          如果不怕麻煩的話，這樣做可以更快一點點，也更保險：

          

          <HTML>

          <HEAD>

          <BODY>

          <SCRIPT LANGUAGE="JavaScript">

          <!--

          var st="<img src=\"http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif\">"

          var ar = new Array(101);

          function test(){

          	document.getElementById("d").innerHTML = ar.join(st);

          	document.getElementById("d").style.display="block";

          }

          //-->

          </SCRIPT>

          <div id="d"><img src="http://imgcache.qq.com/qzone/item/orig/11/3179_5.gif" onreadystatechange="if(readyState=='complete')setTimeout('test()',0)"></div>

          </BODY>

          </HTML>

            回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2006-03-02 17:20
							
						emu
					
          
					
          
						emu的解決方案如下：

          

          <HTML>
          <HEAD>
          <BODY>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          var st="<img src='about:blank' onerror='src=\"var ar = new Array(101);
          window.onload=function(){
           document.body.innerHTML = ar.join(st);
          }
          //-->
          </SCRIPT>
          </BODY>
          </HTML>            回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2006-03-17 18:34
							
						emu
					
          
					
          
						emu一個可能要好一點的解決方案：

          

          // 以 <img src="about:blank" onerror=regImg(this,"http://...gif") /> 的方式定義圖片可以避

          // 免重復加載和圖片堵塞頁面問題。建議在發現圖片下載造成頁面延遲的情形下使用。

          var imgHash = new Object();

          function regImg(e,src){

          	if(src.indexOf("[%")>0)return;

          	var a = imgHash[src];

          	e.onerror=null;

          	if(a==null) {

          		a=imgHash[src]=[];

          		a[0]=new Image();

          		a[1]=e;

          		a[0].onload=function(){setImges(a)};

          		a[0].src=src;

          		setTimeout("imgHash[\""+src+"\"]=null",65535)

          	}else{

          		if(a[0].readyState=="complete")

          			e.src=src;

          		else

          			a[a.length]=e;

          	}

          

          }

          function setImges(a){

          	for(var i=1;i<a.length;i++)

          		a[i].src=a[0].src;

          }

            回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2007-10-08 19:38
							
						meizz
					
          
					
          
						忽略本地緩存的原因并不是用 innerHTML 創建，而是你在 window.onload 里調用這種創建模式，換個代碼：

          <html>

          <body>

            <div id="dd"></div>

          </body>

          

          <script type="text/javascript">

          var a = new Array(11);

          var s = "<img alt='' src='http://www.baidu.com/img/logo.gif' /><br/>";

          document.getElementById("dd").innerHTML = a.join(s);

          </script>

          </html>

          

          只是把腳本代碼延后直接運行就沒有了這個BUG。

          http://blog.csdn.net/meizz/archive/2007/10/08/1815790.aspx  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2007-10-10 13:57
							
						emu
					
          
					
          
						上面的做法不算是延后吧：

          <HTML>

          <BODY onload="alert('onload')">

          </BODY>

          <SCRIPT LANGUAGE="JavaScript">

          alert("test")

          </SCRIPT>

          </HTML>

            回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: IE 緩存策略的BUG
							
								2008-12-31 02:55
							
						母延年
					
          
					
          
						真是萬分感謝，這個問題解決了好久，這一宿沒白忙。

          我采用了這種方法 IE6下圖片確實只請求了一次，謝謝，
          _$(id).innerHTML=strTree;
          			var list=_$(id).getElementsByTagName("img");
          			for(var i=0,l=list.length;i<l;i++)
          			{
          				var src=list[i].getAttribute('_src');
          				if(src)
          				{
          					list[i].src=src;
          				}
          			}  回復  更多評論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          




    







          
        
	




主站蜘蛛池模板：
上虞市|
堆龙德庆县|
孝义市|
鸡西市|
拜泉县|
奉化市|
周口市|
郸城县|
晋城|
秦安县|
商都县|
清远市|
泽库县|
仪征市|
兴化市|
望江县|
柘城县|
开平市|
邛崃市|
绵阳市|
嘉鱼县|
县级市|
开江县|
会昌县|
兰考县|
平江县|
普兰店市|
婺源县|
桦南县|
同德县|
雅江县|
绥江县|
海门市|
朝阳区|
河池市|
永和县|
泸溪县|
吴旗县|
临漳县|
瓦房店市|
米脂县|