Mast head image bug

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.

Header image bug

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;}

This is working great except for this random issue.

If you have ever seen this before and know of a solution, please let me know. I hope to have a comment form up for these posts soon.

If I come up with a reason or a solution (hopefully both) I'll be sure to post it.

Now that I have code blocks setup, I figured I'd post the original code that had the issue... commented for your viewing pleasure of course.

<!--- 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)#" />

Most Recent Photos