How to disable the disk cache when loading image from file

I want to disable disk cache when loading textures from list of files (the loaded files cycle over the list).

I tried to:

  • disable THREE.Cache
    THREE.Cache.enabled = false;

  • set the requestHeader to no-cache

const texLoader=new THREE.TextureLoader();
texLoader.requestHeader = { 'Cache-Control': 'no-cache, no-store, must-revalidate' };
  • set the main html page to no cache
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

But I’m still seeing disk cache, in Chrome’s Network tab…

How do I do it?

I ended up adding a dummy variable to the request. For example:

imgUrl: example2/data/IMG_20190429_083739.jpg?12
imgUrl: example2/data/IMG_20190429_083739.jpg?13

The other option is to tick the “disable cache” in Chrome or Safari Network tab.

With that, I’m not seeing the “disk cache” in the “Size” column anymore anymore.

THREE.Cache affects whether three.js itself will cache the results of requests. <meta http-equiv="Cache-Control" is best avoided.

The behavior you’re seeing is the browser (not three.js) caching requests. You can disable that either with different URL parameters (as you’re doing above) or by changing the settings of the server hosting those files.

1 Like

Via PHP for one file:
<?php echo 'imgUrl: example2/data/IMG_20190429_083739.jpg?v='.time(); ?>