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 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pre-loading images for website

    how do I have the web site load up all the images on the index page or w/e so that when they go to new pages, they don't have to load everything on the spot?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You could but since that is the page that you want to load quickest (meaning it should be under 30k in total size including all images and scripts) doing so will probably have the effect of driving people away from your site before they get started.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what do you suggest? can i spread out the loading of images on different pages that I choose?

  • #4
    Regular Coder GO ILLINI's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    634
    Thanks
    0
    Thanked 7 Times in 7 Posts
    well any image is cached so if you use the same 4 images on all of your pages, the first page will take a bit to load but rest will load quickly.(like felgall said kind of)
    Remember that the first page is the one that makes an impression. You want the home page to look the best and load the fastest. Chances are if they like the first page, they will be willing to wait longer for the second page to load.



    -Adam
    Why not thank me?

    http://adamsworld.name

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    51
    Thanks
    7
    Thanked 1 Time in 1 Post
    Felgall?

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    3 posts above you.

    Look up.

    Frank

    felgall
    Senior Coder
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Unless your images are really huge or your visitors are on a very slow dial-up connection there is not a lot of point in pre-loading.

    One way that shouldn't affect page loading speed too much would be to call all your larger images (i.e. bigger than thumbnails) into a div which uses either visibility: hidden, or left-margin:-9999px to hide it from being displayed. In the html size the images as 1px x 1px, then use a server side include to place the div in the code at the bottom of each page.

    That way all the images will start loading into the cache whichever page the visitor lands on.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #8
    Regular Coder GO ILLINI's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    634
    Thanks
    0
    Thanked 7 Times in 7 Posts
    the 'load all' method may use more bandwidth then you really want to... If they come to one page and have to load all 20 images but only 2 are on that page, and then they leave, you've just wasted that bandwidth that could be used by someone else who actually wants to see the images.
    Unless the images are HUGE or the users have no interest in them, they will wait for them to load.

    An alternative option is to use what most image editors call the 'progressive browser display' function. The result is slightly larger image sizes, but the browser displays them line by line as they load.

    -Adam
    Why not thank me?

    http://adamsworld.name

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a ton. I think I will use the div off the screen method, thats brilliant! And yes, most of these images are big but there are not too many, im going to put the load on the sub pages for loading, if they like my first page, they will be much more likely to stick around for the image loads. Thanks again.

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    you can preload images with javascript

    http://www.pageresource.com/jscript/jpreload.htm

  • #11
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    here is a image preload script, but as suggested above you may only want to preload images used on every page and the entire site itself should be relatively small in size.
    The 125 signifies Height and the 25 signifies Width.
    Save this as a .js file

    Code:
    <!-- 
    
    var= new Image(125,25)
    var.src = "image1_location.gif"
    
    var2 = new Image(125,25)
    var2.src = "image2_location.gif"
    
    //-->
    Now just put <script type="text/javascript" language="Javascript" src="http://www.yoursite.com/scripts/preload.js"> in the <head> of your site.


  •  

    Posting Permissions

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