Log in

View Full Version : Removing the image frame that appears before the image is loaded (Firefox)


fase_xi
02-16-2011, 07:37 AM
Hi,

Is there a way to remove (or get around) the empty image frame that appears when the actual image is loading? You can see the example here:
http://dl.dropbox.com/u/13341502/imgBox.jpg

It seems to only happen in Firefox. And I prefer the way browsers like Safari load the images, just plain blank without any frames or icons.
Nile
02-16-2011, 11:53 PM
You can try putting this in the <head> part of your document, replacing the image1 and image2 with your images (and adding more as needed):


<script type="text/javascript">
var preload = ['image1', 'image2'];
var loadedImg = new Array();
for(var i = 0; i <= preload.length-1; i++){
loadedImg[i] = new Image();
loadedImg[i].src = preload[i];
}
</script>
fase_xi
02-17-2011, 07:09 AM
Nile,

It might be ok to preload if I only have a few images, but the problem is I have hundreds. And a part of my website is a wordpress blog. So I don't think it might be suitable...
Nile
02-17-2011, 12:52 PM
Okay. Instead of actually getting rid of the boxes, you can just display a "loading" sign at the top of your document.

Place this in the <head> part of your document


window.onload = function(){
document.getElementById('loading').style.display = "none";
}


And make a div with an id of loading where ever you want it



<div id="loading"><span>Loading... Please wait.</span></div>