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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Loading Images in a certain order

    Sorry I assume this has been discussed, but I couldn't find anything quite what I needed from searching the forums...

    Basically I'm loading lets say... 50 images on a single page, all are display:none, except for the first one... , so you don't see the images as they load, but they are loading for a while in the background.

    I need to load the images in a particular order, not just the order they appear in the HTML, so say I need to load the first 3 images of the 'doodles' section, the 'illustrations' section and the 'life' section.... then after the first 3 of each of those sections are loaded, continue loading the other images after those priority images are loaded.

    Is there a decently lightweight/easy way to do this?

    Thanks!

    Nick

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Have a look at:-

    http://www.cryer.co.uk/resources/javascript/script3.htm

    The problem is that this will only work if the user has Javascript enabled in his browser. Another approach is:-

    A ) Regardless of where the image appears in the layout, make sure that it appears before all others in the HTML markup code of the page.

    and:

    B ) Download all of your images that appear on the page. Then delete them all from the server. Then upload them to the server, one at a time, in the order in which you want them to be served.


    Quizmaster: In Roman Catholicism, baptism, confirmation and matrimony are three of the seven what?
    Contestant: Deadly sins.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    two routes:

    1. the simple way:
    pre-cache all the important images in the document's head, so they are virtually guaranteed to be cached when img tag in the body finds it.



    2. replace all the img tags with a span with a unique id. once the page loads,
    an onload script then starts adding the images in a loop in the background.
    you would code a list of image paths and the id of the span that the image goes in.
    eg: images = {bob1: "bob.jpg", bob2: "bob2.jpg", bob3: "bob.png"} ...

    the scond example, while it requires more work up front, ultimatly gives you a lot more control, and flexibility later. you could only load up some images, or not start loading the images until the section is activated, etc...

    just a simple loop loading the images upon boot will dramatically increase the perceived performance of the page. the page will be usable almost instantly.
    you may have noticed that browsers get stuck loading images, even if they are invisible. this would totally fix those issues.

    for users without javascript, if you care, save a copy of the page you have now called indexNOJS.htm (or whatever). you can then place a simple meta redirect tag in a no-script tag in the head that redirects users without javascript to the regular, slow loading html page.


    if you only need to guarantee 5-10 images will be there, use the first trick.
    i could whip up some code for either one if you need, but there's lot of examples, and the preloading process should be very simple; 5 lines of code max.



    edit-
    i just thought of an alteration to the second example.
    to reduce the amount of work on your part:
    you could simply move the url from each img tag's .src attrib to the title, alt, or a made-up attrib.
    then the image loader simply finds the images, and change the .src to the .alt (or whatever).
    that way, you wouldn't have to build the annoying image index, making it fast and easy to implement.
    Last edited by rnd me; 08-21-2008 at 09:27 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    rnd me, how would I do the 'simple way' ? If you could throw up some example code for that, that would be awesome! Thanks,

    Nick

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Place the following script in the <head> section of your page:-

    Code:
    <script type = "text/javascript">
    if (document.images) {
      pic1= new Image(100,25);   // width and height of image
      pic1.src="http://someplace.com/image1.gif";   // url of image source
    
      pic2= new Image(240,55); 
      pic2.src="http://someplace.com/image2.gif"; 
    
      pic3= new Image(88,31); 
      pic3.src="http://someplace.com/image3.gif"; 
    }
    </script>
    Adjust your width, height, and url values accordingly. Obviously you can preload more images if you wish.



    The one thing that unites all human beings, regardless of age, gender, religion, economic status, or ethnic background, is that, deep down inside, we all believe that we are above-average drivers.


  •  

    Posting Permissions

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