2

我有一个头像加载动画，它在加载时被交换为图像：

  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+")");
    });
}

它有效 - 加载图像后，背景被交换为头像。但是浏览器随后会向同一图像发送一个新请求....

图片网址如下：

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

我可以强制浏览器缓存该图像吗？或服务器端代码？

4

2 回答 2

1

是的，您可以使用服务器端代码来实现。查看其他 stackoverflow 答案- 特别是 PHP 的片段，了解如何设置 HTTP“过期”标头。

URL 末尾的查询字符串是导致浏览器不缓存文件的原因。浏览器承认任何带有“？”的 URL 在文件名可能是动态之后，因此它不会缓存它。一种解决方案是使用URL 重写，这样您就可以使用类似 的 url 来获取图像/avatar/<fbid>/<token>/<width>/<height>，这实际上是在诱使浏览器认为它正在请求静态内容，并因此对其进行缓存。

于 2013-01-24T13:46:43.577 回答
1

正如评论中所说：您可以使用元素 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-24T14:05:44.643 回答