how to prevent browsers from loading images

[luismuzquiz]

I have around 2-3 hundred images (between 100-200k eachone), located at the bottom of my code, within the famous <div class="hidden-container"> just like this:

Code: Select all

<div class="hidden-container">
      <a id="gallery-1" class='highslide' href='../images_alfonsino/diciembre1.jpg' onclick="return hs.expand(this, config1)" title="Diciembre 2011">
      <img src='../images_alfonsino/diciembre1.thumb.png' title='Diciembre 2011'/></a>

            <a id="gallery-1" class='highslide' href='../images_alfonsino/diciembre2.jpg' onclick="return hs.expand(this, config1)" title="Diciembre 2011">
      <img src='../images_alfonsino/diciembre2.thumb.png' title='Diciembre 2011'/></a>

   <a id="gallery-1" class='highslide' href='../images_alfonsino/diciembre3.jpg' onclick="return hs.expand(this, config1)" title="Diciembre 2011">
      <img src='../images_alfonsino/diciembre3.thumb.png' title='Diciembre 2011'/></a>
</div>

But with the 2-3 hundred pictures on several different galleries.

When someone enters the web page, even if it does not clic on a gallery, web browsers start to "get" or spider the images, so it`s very very slow for the web page to load, (around 2.6 minutes last time i checked). Is there a way to prevent the images from loading? So later when the user really needs the image and click on the gallery link It would load it then?

Thanks in advance

[pritaeas]

You may want to read this thread.