使用Javascript緩存圖片 - ajax重新加載它們

我有一些AJAX設置間隔來檢查服務器的通知等問題是瀏覽器沒有緩存像我想象的那樣的圖像。使用Javascript緩存圖片 - ajax重新加載它們

每隔2.5秒運行一次間隔，並設置來自XML的div的innerHTML，包括圖像。

文字很好，但每隔2.5秒，圖像顯然會重新加載，導致文字移位。

這裏是JS

window.onload = function(){ 
    inth = setInterval(function(){ 
     if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();}else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 
     xmlhttp.onreadystatechange=function(){ 
      if (xmlhttp.readyState==4 && xmlhttp.status==200){; 
        try{z=xmlhttp.responseXML.documentElement.getElementsByTagName("activity");}catch (er){z = "";} 
        for (i=0;i<z.length;i++){ 
         zz=z[i].getElementsByTagName("time"); 
         {try{timez = zz[0].firstChild.nodeValue;}catch (er){timez = "";}} 
         zz=z[i].getElementsByTagName("str"); 
         {try{ustr = zz[0].firstChild.nodeValue;}catch (er){ustr = "";}} 
         zz=z[i].getElementsByTagName("user"); 
         {try{user = zz[0].firstChild.nodeValue;}catch (er){user = "";}} 
         zz=z[i].getElementsByTagName("act"); 
         {try{act = zz[0].firstChild.nodeValue;}catch (er){act = "";}} 

         ntxt = ntxt + "<div style='border-bottom: 3px dotted #DBDBDB; padding:.5em;'><div><span style='display:inline-block; font-size:14px; font-weight:bold; line-height:14px; margin:0; padding:0;'><img src='avatar.php?size=14&hash="+ustr+"' style='height:14px; display:inline-block;padding:0;margin:0;' />&nbsp;"+user+"</span></div><span style='font-weight:bold;'>"+act+"</span><small> - "+timez+"</small></div>"; 
        } 
        ntxt = ntxt + "</div>"; 

        } 
       document.getElementById('actstream').innerHTML=ntxt; 
      } 
     } 
     xmlhttp.open("GET","ajax_not.php",true); 
     xmlhttp.send(); 

    }, 2500); 
    return false; 
}

什麼是我最簡單的方法可以防止圖片來自重裝？

來源

2014-01-05 Occam' s Razor

你在說什麼圖片？ – jfriend00

你怎麼知道他們沒有被緩存？你使用瀏覽器的網絡工具嗎？ –

它看起來像是"&hash="+ustr GET請求中包含的參數可能充當cache-buster。如果該參數每次都在變化，則每次迭代都將被視爲全新的請求。

如果這樣不能解決問題，您可能需要查看標頭上的Expires和Cache-Control配置。

來源

2014-01-05 23:36:20 PMG

session_start（）; header（「Cache-Control：private，max-age = 10800，pre-check = 10800」）; header（「Pragma：private」）; header（「Expires：」。date（DATE_RFC822，strtotime（「2 day」）））; –

修復了它.. –

阻止它們重新加載的最簡單方法不是重寫HTML，而是每2.5秒創建一個新的img標記。

它看起來像您的圖像被設置爲avatar.php?size=14&hash="+ustr+"，其中ustr是識別圖像的重要位。

首先，我猜ustr值是每次都是一樣的？檢查ustr值是否不更改每個請求。如果是，那麼就你的代碼而言，每次都有一個不同的圖像。您可能想要修復您的服務器代碼。

而不是簡單地將一大堆文字放入actstream div的innerHTML屬性，我建議在每個組件上放置ID - 然後您可以單獨查找和更新時間，字符串，用戶和行爲值。

完成此操作後，您可以保存以前的ustr值（JavaScript全局變量是一個很容易放置的地方，或者您可以重新讀取圖片標記本身的src屬性），並且僅限於如果值實際更改，則更新圖像標記。

如果必須保持這個討厭的innerHTML爆破代碼，那麼我建議你檢查，當瀏覽器下載avatar.php您的Web服務器發送頭。我的猜測是你沒有設置任何Cache headers，所以瀏覽器不會緩存以前的圖像。

來源

2014-01-05 23:26:19

使用Javascript緩存圖片 - ajax重新加載它們

回答

相關問題