load content of div with preloader without use cache

Question

I have a simple preloader :

<script type="text/javascript">
        function preloader(){
            document.getElementById("mioperspreloader").style.display = "none";
            document.getElementById("mioperswrapper").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>

The second time that i reload my webpage the preloader load data from cache but i don't want! can you help me? Thanks

Answer 1

let's say you have an image in the preloader and you want to prevent it from cache, then you have to change the url like:

    function preloader(){
        document.getElementById("mioperspreloader").style.display = "none";
        document.getElementById("mioperswrapper").style.display = "block";
        var img = document.querySelector("#mioperspreloader img.preloader");
        img.src = /images/preloader.png?__nocache__=" + new Date().valueOf();
    }

this way you are changing the url which is the key for cache.

But you might have more than one image in your preloader, or even ajax json responses, if you want to prevent all of them from cache, then do this for the urls.

you have said

the preloader load data from cache

and loading data probably means you have ajax calls, then add a timestamp or any unique string you can come up with, as a nocache querystring to your ajax calls urls.

jQuery solution: if you use wordpress or other frameworks those use jQuery, you can also do this, for your ajax calls:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
});

if you want to disable the cache, only for a specific phase, you have to run the same code with cache: true, to return to the normal mode:

$.ajaxSetup({ cache: true });