Question

I have created a “background” for a page made up of divs with background images. The result is blocks of random images that fade in, wait, fade out and reload using jQuery and PHP.

This is working in Chrome, Firefox, Safari, Opera (although a little more clunky), Safari/iPad, Android Phone. It “works” in ie8 and ie9 with one exception: The same images come up every time in both version of IE (tested on IE8/Win7, IE9/Vista).

I’ve been using PHP for a while so I know that part is good. I’m rather new to jQuery but as I mentioned it works in all other browser (although it may not be done the most efficient way). Here is the jQuery I’m using:

var auto_refresh = setInterval(function () {
    var $data = $('#backgrounder');
    $data.fadeOut(2000, function() { 
        $data.load('background.php', function() { 
            $data.delay(2000).fadeIn(2000); 
        }); 
    });

}, 10000); // refresh every 10000 milliseconds

The PHP just creates divs with random file names from a folder.

It outputs this type of HTML:

<div class="outerbackgroundbox">
<div style="background-image: url(images/backgrounds/a5.jpg);" class="blocks"></div>
<div style="background-image: url(images/backgrounds/a2.jpg);" class="blocks"></div>
...
<div style="background-image: url(images/backgrounds/a6.jpg);" class="blocks"></div>
<div style="background-image: url(images/backgrounds/a7.jpg);" class="blocks"></div>
</div>

Any thoughts as to why this isn’t updating in Internet Explorer (besides the obvious “IE Sucks” thoughts, that is. 😉

Thanks!

Answer 1

It’s probably a caching issue. To prevent extra overhead IE is just reusing what it got before from the same URL.

http://api.jquery.com/jQuery.ajaxSetup/

$.ajaxSetup({cache: false});

That should disable caching for all AJAX requests you make with jQuery.