Can not load images from cache

Question

Trying to build a gallery with thumbnails. You click a thumbnail, the main image container will show it.

It seems that when I change the URL of the container, it will ALWAYS reload the image from the Internet and not cache it.

I tried 2 approaches both have the same result.

First :

    //save to cache right when script is loaded
    var cacheImages =[];
    preloadimgs();
    function preloadimgs(){
        for(var k=0;k<5;k++) {
          var img = new Image();
          img.src = currentStore.product.media.photos[k];
          cacheImages.push(img);
        }
    }

//load
    function thumb(arg){


   var prvimgShow = cacheImages[arg].src;
   var finalurl="url("+prvimgShow+")";

   $("#preview").stop().animate({opacity: 0.7},100,function(){
       $(this).css({'background-image': finalurl})
                  .animate({opacity: 1},{duration:200});
    });

}

Which will result in a VERY slow reloading of that photo whenever I click a thumb.

Second(which I asked about here already): Here I get the photo FROM the thumbnail background as a source :

//get a thumb's background photo
var prvimgShow = document.getElementById("thumb0").style.backgroundImage;

//show it
$('#thumb0').on('click', () => {
  $("#preview").stop().animate({
    opacity: 0.7
  }, 100, function() {
    $(this).css({
        'background-image': prvimgShow
      })
      .animate({
        opacity: 1
      }, {
        duration: 200
      });
  });
})

BOTH RESULT IN RELOADING OF THE IMAGE WHICH TAKES 2 SECONDS. The images are very small (300k), and for a gallery this is a bad UX.

score 1 · Answer 1 · answered Aug 13 '19 at 08:46

1

If you want the browser to load the images from the cache, you have to configure this on the server. You can use Etag-Header or Cache-Control Header. This will let the browser know that it can load these assets from the cache.

answered Aug 13 '19 at 08:46

manoi

758
4
11

What ? no ... not at all. browsers if not configured otherwise, will cache every photo that is loaded into the document by default unless its really big. – hkrly Aug 13 '19 at 08:49

score 1 · Accepted Answer · answered Aug 13 '19 at 09:03

1

While I don't know internals of browser and why it is not caching, One of the solution I can think of is:

Don't use the direct url and instead download the file and make it into a blob url. Keep the reference of the blob url instead in cacheImages just as you are doing. Then use the blog url else where and resource will not be downloaded again.

You can refer How to get a File() or Blob() from an URL in javascript? for how to fetch image and convert it to a blob url.

answered Aug 13 '19 at 09:03

vatz88

2,422
2
14
25

Thanks, i thought about that but i realized that if i do it, then something is wrong because images should be cached and for some bad reason they are not. Is it realted to the fact that the urls have tokens from Google (Firebase) ? – hkrly Aug 13 '19 at 09:16
1

I don't think there is any standard for how and when browser should cache. It totally depends on browser. Also, yeah the url should exactly match for browser cache to work like query param and everything should be exactly same. Solution I proposed is more full proof in the sense that it is likely to have same behavior in all browsers. – vatz88 Aug 13 '19 at 09:39
Thanks a lot ! will check it out, altough i still have this question in mind - why Chrome and Safari both do not cache such small images . – hkrly Aug 13 '19 at 11:03

Can not load images from cache

2 Answers2