PHP生成的圖像預壓

我有一個化身加載動畫，在加載時這是越來越交換的圖像：PHP生成的圖像預壓

var avvy = $.trim("/"+this.mycoach.avatar); 
    this.tmpImg = new Image() ; 
    this.tmpImg.src = avvy; 
    $(this.tmpImg).load(function() { 
     $(contentDiv).find(".photo").css('background-image',"url("+avvy+")"); 
    }); 
}

它的工作原理 - 後的圖像加載背景換了頭像。然而，瀏覽器然後發送到同一圖像的新要求....

圖像的URL是這樣的：

/avatar_fb.php?fbid=*****&width=80&height=80&token=3547***52

我可以強制瀏覽器緩存的形象？或服務器端代碼？

來源

2013-01-24 n00b

jQuery是可選的，只是測試它是否會以這種方式工作（沒有比.onload變化; /） – n00b

你可以使用它作爲'src'價值，但如果你使用它作爲背景圖像似乎現在沒有辦法：http://stackoverflow.com/questions/11907568/force-image-caching-with-javascript – jantimon

你可以使用jQuery'$ .ajax'並設置'緩存：真' – Morpheus

正如在評論中所說：您可以使用元素tmpImg將圖像追加到.photo div，但該圖像將是一個DOM元素，而不是作爲.photo div的背景。這樣就行得通了。

這裏是小提琴：http://jsfiddle.net/wHPjJ/

tmpImg = new Image(); 
tmpImg.src = "http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5"; 

$(tmpImg).load(function() { 
    $(".photo").append(tmpImg); // this instead of tmpImg would also work 
});

來源

2013-01-24 14:05:44

是的，你可以用服務器端代碼來做到這一點。查看this other stackoverflow answer - 特別是PHP的片段，瞭解如何設置HTTP「Expires」標頭。

URL末尾的查詢字符串是導致瀏覽器不緩存文件的原因。瀏覽器確認任何含有'？'的網址之後文件名可能是動態的，所以它不會緩存它。一種解決方案是使用URL rewriting，因此您使用像/avatar/<fbid>/<token>/<width>/<height>這樣的url獲取圖像，實質上是誘使瀏覽器認爲它請求靜態內容，並因此緩存它。

來源

2013-01-24 13:46:43 Erinaceous

PHP生成的圖像預壓

回答

相關問題