Forcing Image Reload

[dave7777]

Hello I noticed the script does not reload the image if it was already cashed - can I somehow force the script to reload the image each time the page is reloaded? Thansk a lot!!! Dave

[waynegm]

I think you will find that it is a browser cache issue. Ctrl+F5 will force a page load to bypass the cache on most browsers or if you open the developer tools and do a page reload the cache will be bypassed as well.

[dave7777]

Thank you dear Wayne - do you think there is away to force the image to be reloaded each time by using the ajavascript code itselt? I mean can it be doen by addign soem code inside the imageviewer js file? thanks a lot!)

[waynegm]

It is possible to force a reload of an image by adding a query string to the image url. Commonly people add the current time:

imgurl += new Date().getTime();

If you want to force a reload of the entire html page from the server use:

location.reload(true);

[dave7777]

Thank you so much for helping me out Wayne....

I have this code in the html page

    <div align="center">
            <img  id="image1" src="chartsimageview/docs/images/INTEX-weekly-trendlines-chart.png" style="width: 100%; min-height: 400px;"/>

can you help me add that code to this image link..... I tried it this way:

 <div align="center">
                    <img  id="image1" src="chartsimageview/docs/images/INTEX-weekly-trendlines-chart.png+= new Date().getTime();" style="width: 100%; min-height: 400px;"/>
        </div>

and it did not work:(((

[dave7777]

I guess it shoudl be like this:

<div align="center">
                <img  id="image1" src="chartsimageview/docs/images/INTEX-weekly-trendlines-chart.png"+= new Date().getTime(); style="width: 100%; min-height: 400px;"/>
            </div>

hard-corder me)

[waynegm]

Try this combination:

<img id="image1" class="NOCACHE" src="chartsimageview/docs/images/INTEX-weekly-trendlines-chart.png style="width: 100%; min-height: 400px;"/>

Then have somewhere:

<script type="text/javascript">
    ;(function($) {
        $(document).ready(function () {           
            $('.NOCACHE').attr('src',function () { return $(this).attr('src') + "?a=" + new Date().getTime() });
         });
        $(window).on("load", function() {
            var $img = $("#image1").imgViewer2();
         });
    })(jQuery);
</script>

[dave7777]

interestign...let me try

[dave7777]

fantastic!!!! it works but with still loads the earleir version of the images for a split second BEFORE loadign the newly uploaded image....Can you please take a short look Wayne?

[waynegm]

As shown in my example you should put the code that attaches the imgViewer2 plugin to the image in a $(window).on("load" callback. You should only be attaching the plugin once to an image so remove the other instances in the $(document).ready callbacks. I'd suggest you tidy up your code so it is all in a single Githubissues.

Githubissues is a development platform for aggregating issues.