image gallery loading problem

Posted on 2012-09-04
Last Modified: 2012-09-09
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.
Question by:tf2012
    LVL 2

    Expert Comment

    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.
    LVL 1

    Author Comment

    I'll try it but can you explain a little more about how this would solve the problem?

    LVL 49

    Accepted Solution

    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="">

    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.
    LVL 1

    Author Comment

    haven't tested yet maybe today
    LVL 1

    Author Closing Comment

    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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn how to count occurrences of each item in an array.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now