Removing those boxes that show where an image is loading?

[trebor31]

Hi everyone
Newbie here and nearly finished my first site - phew!

I have one quick question - you know how a browser shows an outline box of the shape of an image before the image downloads, well, is there any way to get rid of it or prevent it displaying

This box disappears once the image has loaded so it is nothing to do with the "border" tag and all of my images have the height, width border="0" and alt tags completed.

(I use a lot of images on the my site as I am a photographer and it looks really ugly while it is waiting for the images on a slow connection)

Am happy to use html, css, java...

Thanks for any help.

Tre

[webmaster]

Hi and welcome to DEVPPL.

That little border you are describing can not be controlled by the coder. It's a setting in the users browser that does that.

But there are ways to go around it. For example using a DIV with the image as background. Like this:

Code: Select all

<div style="background-image: url(images/image.gif);width:100px;height:100px"></div>

If you want to redice the HTML-code, just exclude the css to an external file.

I little tip for all you webmasters out there that tries to minimize the HTML-code as much as possible. If you are linking an image you can save a lot of code this way. And if you exclude the CSS to an external file, you will save even more.

If your current code looks like this:

Code: Select all

<a href="page.html">
<img src="image.gif" alt="Image Name" width="100" height="100" />
</a>

You can instead do like this:

Code: Select all

<a href="page.html" style="background:url(image.gif);width:100px;height:100px;"></a>

And if you exclude the CSS to an external file, it could look like this:

styles.css:

Code: Select all

#a {
   background: url(image.gif);
   width: 100px;
   height: 100px;
}

And the HTML:

Code: Select all

<a href="page.html" id="a"></a>