SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image preloader question

    Hi there,

    I have about 6 HTML pages with quite a lot of images. Each page has a slideshow to scroll/fade these images.

    Is there any way I can have something that will preload the images on each page before the slideshow starts, i.e. display a "loading" message before the page is displayed?

    Many thanks.

  2. #2
    SitePoint Enthusiast keay's Avatar
    Join Date
    Apr 2009
    Location
    Los Angeles, California
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you trired something like this in your <HEADER>?


    <SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
    preload_image_object = new Image();
    // set image url
    image_url = new Array();
    image_url[0] = "http://mydomain.com/image0.gif";
    image_url[1] = "http://mydomain.com/image1.gif";
    image_url[2] = "http://mydomain.com/image2.gif";
    image_url[3] = "http://mydomain.com/image3.gif";

    var i = 0;
    for(i=0; i<=3; i++)
    preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but is there a way to display a "loading message" or some sort of loading graphic?

  4. #4
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add a div layer onto your page which covers any existing content (change the z value) add your 'loading' graphic to this e.g. a 'spinning wheel'. Make sure you give the div an id.

    Then, use the script as above and add a line to run when the upload has finished which hides this div.

    monkey
    monkey - the rest is history


Bookmarks

Posting Permissions

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