• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 488
  • Last Modified:

image gallery loading problem

see attached for url

when this page loads on my machine in chrome the image gallery thumbs show up in the top right corner until the page finishes loading then appears correctly.  How can I fix this so the images appear only in their correct position without this wierd top right corner appearance during page load.
  • 3
1 Solution
load a transparent .gif of the correct size and put it earlier in your script.  Then your image will appear in the right place when it is ready.
tf2012Author Commented:
I'll try it but can you explain a little more about how this would solve the problem?

Julian HansenCommented:
What you can also do is make your anchor tags block elements and style them to be the same size as your images i.e.
<a class="imglink mti_font_element" href="#">
     <img width="188" height="95" alt="" title="" src="http://aaii.ca/dev/images/igallery/resized/1-100/1-12-188-95-100-c.jpg">

Open in new window

a.imglink {
  display: inline-block;
   width: 188px;
   height: 95px;
   background: url(images/loading.gif) no-repeat center center; /* optional */

Open in new window

A nice add on is to put a background gif with a loading animation as shown above.
tf2012Author Commented:
haven't tested yet maybe today
tf2012Author Commented:
kind of worked ;)  when I set  the height and width  the thumbs jittered when I hovered over them so I just set the display to inline block and left out the WxH dims.  Seems to work


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now