main
side
curve
  1. Welcome to the new boards! Details here!

JavaScript :: "Page Loading"

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

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

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    YodaJeff Manager Emeritus star 7 VIP - Former Mod/RSA

    Registered:
    Oct 18, 2001
    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

    Night4554 Jedi Knight star 5

    Registered:
    Oct 9, 2000
    [link=http://javascript.internet.com/page-details/preload-page.html]http://javascript.internet.com/page-details/preload-page.html[/link]

    And that should be it exactly.

    ¤Night
     
  4. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    YodaJeff Manager Emeritus star 7 VIP - Former Mod/RSA

    Registered:
    Oct 18, 2001
    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

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    Rox Administrator Emeritus star 6 VIP - Former Mod/RSA

    Registered:
    Nov 24, 2000
    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

    YodaJeff Manager Emeritus star 7 VIP - Former Mod/RSA

    Registered:
    Oct 18, 2001
    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

    Rox Administrator Emeritus star 6 VIP - Former Mod/RSA

    Registered:
    Nov 24, 2000
    I have to agree with Jeff thogh, if you optimize your images it shouldn't matter.
     
  10. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    YodaJeff Manager Emeritus star 7 VIP - Former Mod/RSA

    Registered:
    Oct 18, 2001
    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

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    Valiowk Jedi Grand Master star 6

    Registered:
    Apr 23, 2000
    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

    bluebereft Jedi Youngling star 1

    Registered:
    Oct 15, 2002
    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 [link=http://survivormath.imess.net]this location[/link](works on ie only)
    it is a website for some school project

    the script can be found [link=http://www.dynamicdrive.com/dynamicindex4/highlightgrad2.htm]here[/link](ie only version) or [link=http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm]here[/link] (both ie and netscape 6)
     
  15. dark42

    dark42 Jedi Youngling star 3

    Registered:
    May 16, 2002
    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

    bluebereft Jedi Youngling star 1

    Registered:
    Oct 15, 2002
    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.