Search code examples
http-caching

PHP generated image preloading

i have a avatar loading animation, which is getting swapped for the image when it is loaded :

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

it works - after the image is loaded the background is swapped for the avatar. however the browser then sends a new request to the same image....

the image url is like :

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

can i force the browser to cache that image ? or server side code ?

Solution

  • As said in the comment: You can append the image to .photo div, using the element tmpImg, but the image will be a dom element, not as a background of the .photo div. That way would work.

    Here is the fiddle: 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
});