Question

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

  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

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

Answer 1

是的，您可以使用服务器端代码执行此操作。查看this other stackoverflow answer - 特别是PHP的片段，了解如何设置HTTP“Expires”标题。

URL末尾的查询字符串是导致浏览器不缓存文件的原因。浏览器确认任何带有'？'的网址文件名后可能是动态的，因此它不会缓存它。一种解决方案是使用URL rewriting，因此您可以使用类似/avatar/<fbid>/<token>/<width>/<height>的网址获取图片，从根本上欺骗浏览器认为它正在请求静态内容，从而缓存它。

Answer 2

如评论中所述：您可以使用元素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
});

PHP生成的图像预加载

2 个答案: