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):

Code:

<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

Code:

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

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

Code:

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

Thread: Removing the image frame that appears before the image is loaded (Firefox)

Thread Tools

Search Thread

Removing the image frame that appears before the image is loaded (Firefox)

Bookmarks

Bookmarks

Posting Permissions