Generating random image in IE

[eday_2010]

I am currently finishing up the redesign of my site. On the left side of the text is a div that does nothing but display a background image using CSS and PHP. I want it so that everytime someone goes to a new page, this image changes. It works most of the time in Firefox, but it doesn't work in IE 8. I am assuming that the browser is just keeping the same style sheet or PHP file loaded from cache instead of refreshing it. So I want to know if there is a way for the site to force the refreshing with every page change.

Every page has

<div class="leftCol" id="random">

which is where the background image is displayed. id="random" refers to

#random {
	background-image: url(../images/random/rotate.php);
	background-repeat: no-repeat;
}

which is what places the image. And rotate.php is the following:

<?php
    	$folder = '.';

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';
	
$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

?>

I am not sure if it's a browser thing, or if it's the CSS, or the PHP. But I would like it to be a new random image with each page. Is there a way to ensure this within the PHP file, and if so, how do I go about doing it? Or is it something else that needs to be done?

[Nile]

Link to you're page please?

[eday_2010]

www.wnstudios.ca/contact

All the pages are there except Home.

[Nile]

Works for me...

[Schmoopy]

Only thing I can think of is that in IE, the MIME types are different. For example:


jpeg = 'image/jpeg'

Would be

jpeg = 'image/pjpeg'

Maybe try adding that in to see if it works. But works fine in IE8.

[eday_2010]

Works for me...

But works fine in IE8.

You both got different images to load in IE 8 when you clicked on different pages? I cannot get it to work on either computer at home.

Only thing I can think of is that in IE, the MIME types are different. For example:

jpeg = 'image/jpeg'

Would be

jpeg = 'image/pjpeg'

Maybe try adding that in to see if it works.

That didn't work. Someone on my hosting sites forum suggested PHP cache limiters, but they don't seem to work either.

[jscheuer1]

First off, clear your browser's cache before each test of any change. Otherwise you may be seeing the result of at least portions of the older version(s) of your code to one degree or another.

If after following the other advice you've received in this thread, clearing the browser's cache as mentioned above before each test, the image is still getting cached, you could try something like so -

Replace:

#random {
	background-image: url(../images/random/rotate.php);
	background-repeat: no-repeat;
}

with:

#random {
    background-image: url(../images/random/rotate.php?bust=<?php echo time(); ?>);
    background-repeat: no-repeat;
}

Note: This assumes that the file with the above code has the .php extension.

[eday_2010]

That code is from the style sheet. Would your code work in the rotate.php file? How else could I use that code? Is there something I could put in rotate.php (code in first post), that would prevent the random image from caching?

I know a random image with each click is easily done with JavaScript, but I would rather not use that. I love Internet Explorer, but it doing things like this make me sad. Everything works fine in Firefox.

[jscheuer1]

Let's see, I tried this in IE 7 and it does appear to be caching something in that the background image is the same, while in say - Firefox, it changes. In IE 7 if you reload the page it changes, but if you simply navigate to the page, not. Did you try (you seem to be saying that you did, just thought I'd ask specifically):

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

as the very first thing in rotate.php?

From what I observed about IE 7, preventing caching of the page should do it, but that would probably increase load times, especially for pages that have a lot of other images or content on them.

If you could prevent the stylesheet from caching, see:

http://css-tricks.com/can-we-prevent-css-caching/

including the responses, that might do it.

As for doing things in the stylesheet via PHP (like my previous suggestion, or even the PHP no-cache headers), if any of that would even work at solving this, you could give the stylesheet a .php extension or add .css to the list of extensions/mime types that the server processes as PHP. But it's hard to know what's getting cached. It could be the stylesheet that's getting cached, or perhaps even the concept of background-image.

If it's the stylesheet, PHP or javascript could be used on the pages to prevent caching of the sheet and/or the pages could be prevented from caching. Preventing the pages from caching will (as noted above) get 'expensive' though. Or PHP could be used on the sheet.

If it's the concept of background-image getting cached though, if such a thing is possible, it may not be possible to break that in IE 7 without preventing caching of the page, maybe not even then, and you will just have to live with that particular browser not working with this feature. From remarks by others in this thread, IE 8 and all other browsers seem not to have this problem.

I have WAMP, so I'll see if I can devise a sandbox to test some of this in IE 7, but I'll only report back on that if I get any positive results. Let us know if you solve this though please.

Note: It definitely appears to be the rotate.php file that is cached, as if I load just it into IE 7, it's always the same unless I refresh it. This doesn't mean that preventing caching of the sheet won't work, only that preventing caching of rotate.php should work, if it can be accomplished.

[jscheuer1]

OK, in local testing under WAMP, using the cache busting headers at the top of rotate.php:

<?php 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past 
?>
<?php
    	$folder = '.';

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/j . . .

fixes this in IE 7. I did have to get the old version of rotate.php out of IE 7's cache first though. To do that, navigate directly to rotate.php and refresh the page.