This is just about to drive me crazy. I like the random header image at the top of this site but something with the way I'm doing it is causing a weird bug. Occasionally, when you load the page, you may notice that the image doesn't change. Since the images are random, it could, of course, be that the same image just happened to come up twice. However, there are quite a few images so the odds are against that happening as often as it appears to.

When it does happen, you can scroll down slightly so top half of the image is off the screen and the bottom half is still visible. Then, if you scroll back up, you will notice that the top half of the image is a different image all together! It's like it just isn't repainting the image correctly or something.



Sometimes, although rarely, you can see something similar but vertailly. Meaning, when the page loads, the left side of the header is one image and the right side is another.

I've seen this issue happen in a few different browsers (chrome, firefox and safari) from 3 different computers (a Mac and two PCs) and on two different servers (CF8 and CF9).

Basically, the process to grab the images is like this. I have a template called mastimages.cfm (or something like that) and I have a directory of images to use in the header. Mastimages.cfm will get a directory listing of all the images and choose a random one to use. Then, with CFIMAGE, the image is read into an object and watermarked. The final image is then served up with cfcontent. The end result is a CF template that is always a random image.

Now in the stylesheet, I can just do this to display the random image:

.someclass {background:url(/masthead.cfm) no-repeat;}

<!--- get a directory listing of all the available images --->
<cfdirectory name="variables.mastImages" action="list" directory="#expandPath('/images/mastimages/')#" filter="*.jpg" />

<!--- pick a random number between 1 and the number of images from the directory listing --->
<cfset variables.mastImg = randRange(1,variables.mastImages.recordcount) />

<!--- create an image object from the random image --->
<cfset variables.objImage = imageRead(expandPath('/images/mastimages/' & variables.mastImages['name'][variables.mastImg])) />

<!--- create an image object from the water mark image file --->
<cfset variables.objWatermark = imageNew(expandPath('/images/watermark.png')) />

<!--- turn on antialiasing for better wuality images --->
<cfset imageSetAntialiasing(variables.objImage,"on") />

<!--- set the transparency of the watermark so it doesnt stand out too much --->
<cfset imageSetDrawingTransparency(variables.objImage,40) />

<!--- paste the watermark object onto the bottom right corner of the main image (offset bottom-right by 5 pixels) --->
<cfset imagePaste	(	variables.objImage
			, 	variables.objWatermark
			,	(variables.objImage.getWidth() - (variables.objWatermark.getWidth() + 5))
			,	(variables.objImage.getHeight() - (variables.objWatermark.getHeight() + 5))
			) />

<!--- finally, serve the image with cfheader/cfcontent --->
<cfheader name="Content-Disposition" value="inline; #variables.mastImages['name'][variables.mastImg]#">
<cfcontent type="image/jpg" reset="true" variable="#imageGetBlob(variables.objImage)#" />