Javascript Preload half working?

Hey guys,

I am using fairly standard code to preload images:


function preloadLargeThumbs()
	{
		if (document.images)
		{
			var preload_image_object = new Image();
			// set image url
			image_url = new Array();
			image_url[0] = CONST_STR_IMAGE_PATH + "feature_image.jpg";
			image_url[1] = CONST_STR_IMAGE_PATH + "feature_image_2.jpg";
			image_url[2] = CONST_STR_IMAGE_PATH + "feature_image_3.jpg";
			image_url[3] = CONST_STR_IMAGE_PATH + "feature_image_4.jpg";
			image_url[4] = CONST_STR_IMAGE_PATH + "feature_image_5.jpg";
			image_url[5] = CONST_STR_IMAGE_PATH + "feature_image_6.jpg";
			image_url[6] = CONST_STR_IMAGE_PATH + "feature_image_7.jpg";
			image_url[7] = CONST_STR_IMAGE_PATH + "feature_image_8.jpg";

			var i = 0;
			for(i = 0; i <= 7; i++)
			{
				preload_image_object[i] = new Image();
				preload_image_object[i].src = image_url[i];
			}
		}
	}

The thing is this code only seems to be having the correct effect with background images applied to divs, rather than <img /> tags in hidden divs. I have tried appending to preloaded image objects to the document but either im not doing it right or it has no effect.

Any suggestions?!