JavaScript :: "Page Loading"

Discussion in 'Fan Sites' started by dark42, Jan 7, 2003.

Thread Status:
Not open for further replies.
  1. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    Reason that I'm asking is that my site has about 300kb that must load the first time someone visits my site so images are placed in cache.

    ---------------------------------------------

    I've seen some "Page Loading..." scripts before, but most don't tell the user much.

    My site loads a whole 300kb on your first visit, placing lots of images in cache. What I want is to have a "Page Loading" script that looks like a Flash document's loading. I'd like to pull graphics and a percentage bar, too.

    What I was thinking was to make things like graphics appear in their own layer, which would then become hidden once they were loaded, or something like that. And a progress bar that would be based upon the number of open windows, say each time an image is loaded a layer is closed and x percent is added to the progress bar and its image, on another layer.

    IE:
    - page begins to load
    - layers immediately brought up, one for each image to load in
    - when an image is loaded, its layer is closed and 5% is added to a progress bar
    - when all the images have loaded, the progress bar disappears (on a separate layer)

    Any way to make that all come true?

    ---------------------------------------------

    Though I believe it's impossible, can I get JavaScript to imitate Flash...

    "-- page loading --
    20%
    [== ]
    image1.jpg"

    And change the 20%, the percent loaded bar "[==========]", and the document name (I run my pages off .JS files to make switching design elements easy, so not just .JPG images).
  2. YodaJeff Manager Emeritus

    Member Since:
    Oct 18, 2001
    star 7
    I don't think it's possible.

    But what I'm trying to figure out is why you need 300kb of images to load.
  3. Night4554 Jedi Grand Master

    Member Since:
    Oct 9, 2000
    star 5
  4. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    1) I'm figuring out a way... it's taking time, but I'm coding it.
    2) 300kb of images on the main page because of all the mouse-overs, because of the design practically every one on the site (at the moment) loads. Without preloading, it just sucks. And if you're on broadband, like you all should be, you're fine!
  5. YodaJeff Manager Emeritus

    Member Since:
    Oct 18, 2001
    star 7
    I just feel that 300kb is a bit much to ask for someone to download to visit a website.

    Not everybody has broadband, and there are more effective and efficient ways to get your message across than 300kb of images.
  6. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    True - I'm just playing with designs right now. I think it's around 100kb, actually, but it'll remain 300kb until I switch out some coding. But you've gotta admit that my site isn't that bad, either.

    ;)
  7. Rox Administrator Emeritus

    Member Since:
    Nov 24, 2000
    star 6
    I disagree, since his site is showcasing his portfolio he shouldn't hold himself back. I was taught in art school to design for the audience. Most people that will visit his site should be on braodband or higher anyway.
  8. YodaJeff Manager Emeritus

    Member Since:
    Oct 18, 2001
    star 7
    Looking at your site, I don't see why the graphics should be so large. Have you tried optimizing or compressing them?

    Edit:
    I suppose that's a valid point. I just tend to think about those with regular modems, as I was one of them for so long.
  9. Rox Administrator Emeritus

    Member Since:
    Nov 24, 2000
    star 6
    I have to agree with Jeff thogh, if you optimize your images it shouldn't matter.
  10. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    Eh, compressing them is something I need to do - once I get Adobe Photoshop Elements to work right. Right now it's a maximum-resolution for everything, to be consistant, and so I can compress later. Just wondering, how do I get my files compressed as .GIFs rather than .JPGs and the same quality? I don't know Elements like I know 6.0, and I can't seem to remember the settings.
  11. YodaJeff Manager Emeritus

    Member Since:
    Oct 18, 2001
    star 7
    For photo type pictures, you're usually better off saving them as .jpg's. The .gif format has a limited number of colors, and most photo-type images look better when compressed as a .jpg than when compressed as .gif.
  12. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    Cool. Well, thanks, I've gotta go, get some sleep tonight. I just compressed 3/4 of the images from the image/ folder... wow, cut their quality in half and they looked practically the same (also cut the size in half!). So I think I'll play around with optimization sometime tomorrow, thanks for the input, I'll be sure to check with you guys tomorrow or something.

    (And Rox is right... they should be using broadband! Add to it I'm trying to focus on digital images, ie lightsabers - though that short clip I have now sucks... - so they'll need it... eventually.)

    Anyways, thanks!
  13. Valiowk Force Ghost

    Member Since:
    Apr 23, 2000
    star 6
    Here's a thought I had. Instead of loading the real images the first time round, how about loading a similar version of the images, only with a lower resolution, so that the loading time is shorter? If somebody really wants to see the high resolution pictures after that, that person can then click on another link (of course, providing that person has broadband). Otherwise, a lower resolution wouldn't affect much.
  14. bluebereft Jedi Knight

    Member Since:
    Oct 15, 2002
    star 1
    The problem with Valiowk's suggestion is that you'll need two image files for every 1 image (i.e. 1 low-res, and 1 high-res)

    This can prove to be inconvinient.

    My suggestion is that you use javascript to achieve that mouseover effect.

    see an example at this location(works on ie only)
    it is a website for some school project

    the script can be found here(ie only version) or here (both ie and netscape 6)
  15. dark42 Jedi Knight

    Member Since:
    May 16, 2002
    star 3
    I thought about that. Turns out you've still gotta load around 75kb of images (better than 300!). I ran it through cookies, if you want me to throw my example back up, I can.
  16. bluebereft Jedi Knight

    Member Since:
    Oct 15, 2002
    star 1
    I veto that.

    75kb is a LOT better than 300kb.

    Once I finish reading that whole cunk on xml, I might be able to help. Might.
Thread Status:
Not open for further replies.