Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2008
    Posts
    15
    Member #
    16429
    I am working on a website right now where I have an image gallery. It can be seen here (I have just placed it at this location for testing purposes and to show the client):
    http://gerryweirdemo.110mb.com/gallery.html

    Basically, as you can see, the user can either cycle through the images or select one from the bottom to display. The problem with this, is I am simply flipping the image at the top with javascript.

    When a new user visits the page, and tries to change the image, there is an initial delay of several seconds for the image to load. This sort of ruins the effect of course and possibly even confuses the user. Once the image loads initially and is placed in cache, it loads instantly when requested again.

    I have tried the traditional method to "preload images" using javascript, but it does not appear to be working for me. When I clear out my browser's cache and test the page, it is still taking time for each image to load when initially requested.

    here is the code I have right now:

    Code:
    var imageNumber = 1;
    var IMAGES = 12;
    
    function preloader()
    {
         var k = 0;
    
         imageObj = new Image();
    
         imagearray = new Array();
         imagearray[0]="full1.jpg"
         imagearray[1]="full2.jpg"
         imagearray[2]="full3.jpg"
         imagearray[3]="full4.jpg"
         imagearray[4]="full5.jpg"
         imagearray[5]="full6.jpg"
         imagearray[6]="full7.jpg"
         imagearray[7]="full8.jpg"
         imagearray[8]="full9.jpg"
         imagearray[9]="full10.jpg"
         imagearray[10]="full11.jpg"
         imagearray[11]="full12.jpg"
    
         for(k = 0; k <= 11; k++) 
         {
              imageObj.src=imagearray[k];
         }
    }
    
    function nextImage()
    {
        document.getElementById('t' + imageNumber).style.border = "0px solid black";
     
        if (imageNumber == IMAGES)
        { 
           imageNumber = 1; 
        } 
        else
        { 
            imageNumber++;
        }
     
        document.getElementById('slide').src = "galleryimages/full" + imageNumber + ".jpg";
        document.getElementById('t' + imageNumber).style.border = "5px solid black"; 
    }
    
    function lastImage()
    {
        document.getElementById('t' + imageNumber).style.border = "0px solid black";
     
        if (imageNumber == 1)
        { 
           imageNumber = IMAGES; 
        } 
        else
        { 
            imageNumber--;
        }
     
        document.getElementById('slide').src = "galleryimages/full" + imageNumber + ".jpg";
        document.getElementById('t' + imageNumber).style.border = "5px solid black"; 
    }
    
    function select(i)
    {
       document.getElementById('t' + imageNumber).style.border = "0px solid black";
     
       imageNumber = i;
     
       document.getElementById('slide').src = "galleryimages/full" + imageNumber + ".jpg";
       document.getElementById('t' + imageNumber).style.border = "5px solid black";
    }
    I am invoking the preload function onLoad of the body of my html page, but it doesn't seem to make any difference. I realize this is probably a pretty common issue, but just wanted to get some suggestions on what I can do to improve the loading speed here.

  2.  

  3. #2
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    You're not using the preloaded images correctly.

    This doesn't reference the array.
    document.getElementById('slide').src = "galleryimages/full" + imageNumber + ".jpg";

  4. #3
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    I believe your code will only preload the last image in the array. Instead, try to create an object for each image.

    You can check two callbacks on the Image object: onerror and onload. Once each object has fired either onerror or onload, you know that the images have been loaded, although not necessarily cached for future requests.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  5. #4
    Junior Member
    Join Date
    Feb 2008
    Posts
    15
    Member #
    16429
    I tried a bunch of changes with the javascript, instead of the array I made an individual image object for each image. The browser did appear to be loading the images (I could see the processes going at the bottom of the screen), but was not caching them as the initial response time was still not improved when requesting an image. What is the point of doing something like this if the browser is not caching the images? isn't that the whole point? I don't know, I didn't test it in different browsers, I assume they might react differently. Right now I am running Firefox 3 on Ubuntu.

    So I was able to resolve the issue with a bit of a cheat. Before, the thumbnail images along the bottom were seperate image files. I just changed those to be the fullsized image files and styled their width and height. That way all the images are loaded and cached from the beginning. All I really have to sacifice is a longer time for the page to load, and some reduced image quality for the thumbnails. I realize this is a pretty bad practice, but it seems to serve me a purpose in this case.

    Please let me know if you can show me a better way to cache these images.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com