Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Homepage - Slider Showing All Images Before Loading

    Hello all,

    When you go to my homepage, it looks like all the images from my slider load up on top of each other before it compiles it into one.

    Is this an browser issue, computer issue or coding issue?

    www.naturalradiance.net

    Any input is appreciated!

    Thanks,

    OdyOwnage
    My K24A2 Civic Build Thread: http://www.k20a.org/forum/showthread.php?t=15573
    My 2JZGE-T Supra Build Thread: http://forum.clubna-t.com/showthread.php?t=6895
    1995 Toyota Supra - Hardtop: Complete Rebuild Thread Coming Soon...

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hello OdyOwnage,

    What you're seeing are the separate areas of your web page as they are loading. Some of your big banners are about 130 - 150 KB each. They really don't need to be more than 60 KB or so. Large image files take much more time to load than text. Your text loads first, then your images follow soon afterward.

    I think you could define the sizes of your banners in your css, that way space will be saved for them as the rest of the page loads, and nothing will move around when they suddenly appear.

    If you could reduce the size of the banner images, then they will load faster, which will eliminate some of the momentary confusion as your page loads.


    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
    
        <title>Define an image space</title>
        
        <style type="text/css">
    #save-me-room-text-buds {
         width:290px;
         height:81px; }
    	 
    #save-me-room-text-buds img {
         border: 1px solid #ff0000; }
    	 
        </style>
    
    	
      </head>
      <body>
    
     <div id="save-me-room-text-buds"><img src="http://www.theeagleextra.com/new/images/tee_e-edition.gif" width="290" height="81" alt="TEE E-Edition" title="TEE E-Edition"/>
     </div>
      </body>
    </html>



    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 08:26 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Kevin,

    Wow, I completely forgot about this post.

    I think it may be much simpler than that. I know it's something in my CSS that's making that happen.

    Since then, I have redesigned the site to cater more to my needs but I am still having this issue.

    Any other inputs?
    My K24A2 Civic Build Thread: http://www.k20a.org/forum/showthread.php?t=15573
    My 2JZGE-T Supra Build Thread: http://forum.clubna-t.com/showthread.php?t=6895
    1995 Toyota Supra - Hardtop: Complete Rebuild Thread Coming Soon...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •