Results 1 to 10 of 10

Thread: Random image preload problem

  1. #1
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random image preload problem

    Hi, this is my first post on a forum ever —*but I'm in trouble! I have been working on a site the last few weeks and today is my deadline—*it was working fine locally but when I uploaded it, the page would take an obscene length of time to load!

    I found the problem—*I am using a random image script for over 200 image which are all trying to preload before the page shows up.

    Is there any way I can stop them from preloading, or some other way around this—*here is the script in question— I have shortened it to fit more comfortably here:

    Code:
    var rand1 = 0;
    var useRand = 0;
    
    images = new Array;
    images[1] = new Image();
    images[1].src = "images/random/1.jpg";
    images[2] = new Image();
    images[2].src = "images/random/2.jpg";
    images[3] = new Image();
    images[3].src = "images/random/3.jpg";
    images[4] = new Image();
    images[4].src = "images/random/4.jpg";
    images[5] = new Image();
    images[5].src = "images/random/5.jpg";
    
    
    function swapPic() {
    var imgnum = images.length - 1;
    do {
    var randnum = Math.random();
    rand1 = Math.round((imgnum - 1) * randnum) + 1;
    } while (rand1 == useRand);
    useRand = rand1;
    document.randimg.src = images[useRand].src;
    }
    //  End -->
    http://www.dynamicdrive.com/dynamici...dhtmlslide.htm
    Last edited by jscheuer1; 08-26-2011 at 12:56 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I would be inclined to have a loading image, like:



    And forget about preloading everything, that obviously takes too long. So something like:

    Code:
    var rand1 = 0;
    var useRand = 0;
    
    images = [];
    images[1] =  "images/random/1.jpg";
    images[2] =  "images/random/2.jpg";
    images[3] =  "images/random/3.jpg";
    images[4] =  "images/random/4.jpg";
    images[5] =  "images/random/5.jpg";
    
    
    function swapPic() {
    	var imgnum = images.length - 1;
    	do {
    		var randnum = Math.random();
    		rand1 = Math.round((imgnum - 1) * randnum) + 1;
    	} while (rand1 == useRand);
    	useRand = rand1;
    	document.images.randimg.src = 'loading.gif';
    	var im = new Image();
    	im.onload = function(){
    		document.images.randimg.src = this.src;
    	}
    	im.src = images[useRand];
    }
    If document.images.randimg is in a table cell and is the only thing in that table cell and that cell has a fixed width and height, the loading image when it appears will be centered.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 08-26-2011 at 12:04 PM. Reason: fix typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ...

    jscheuer1 —*thanks so much for the reply. I'm stressing out!

    Ok—*I am actually not trying to preload anything —*I will try the code that you posted—*I take it it does not preload, correct?

    I will try it now—*thanks again.

    Xb

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Right, no preloading. That's what the loading image is for. Each image loads as it's called for. If that takes more than a few milliseconds, you see the loading image until the actual image loads. Once the actual image is cached, you will no longer see the loading image for that particular image.

    If you have this set up as an automatic rotating slideshow though we would need more code to make it work right.

    But as long as you're using a link or button for the user to manually move to the next image, this should be OK.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Jscheur1 - I swapped in your code and it doesn't seem to be working now... You can view my shambolic work in progress at: www.babakradboy.com/index_test.html

  6. #6
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm using links—*they look like this: <a onClick="swapPic();">

  7. #7
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any idea why your modification it isn't working? Really appreciate the time.

    Best,
    xb

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Ooops, my bad. I made a typo:

    Code:
    <!-- Begin
    var rand1 = 0;
    var useRand = 0;
    
    images = [];
    images[1] =  "images/random/1.jpg";
    images[2] =  "images/random/2.jpg";
    images[3] =  "images/random/3.jpg";
    images[4] =  "images/random/4.jpg";
    images[5] =  "images/random/5.jpg";
    
    
    function swapPic() {
    	var imgnum = images.length - 1;
    	do {
    		var randnum = Math.random();
    		rand1 = Math.round((imgnum - 1) * randnum) + 1;
    	} while (rand1 == useRand);
    	useRand = rand1;
    	document.images.randimg.src = 'loading.gif';
    	var im = new Image();
    	im.onload = function(){
    		document.images.randimg.src = this.src;
    	}
    	im.src = images[useRand];
    }
    //  End -->
    Add the red single quotes as shown above on the highlighted line.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    wow. that works- thanks so much! and it doesn't preload? you have totally saved my life!

    It would be wonderful to know how to do this without having to identify each file—*like in PHP version I've seen, but in a div and onClick...

    Anyway—
    thanks again,
    Babak

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No preloading. You have PHP? If so you could use it to fetch the array of images from a folder. If not, and you know how many images, and they're all numbered 1 to whatever like in your demo and there are none missing in the sequence, you could do:

    Code:
    var rand1 = 0;
    var useRand = 0;
    
    function swapPic() {
    	var imgnum = 226; // number of images
    	var fallback = 'images/random/c.jpg'; // default image if there's a problem loading the random image
    	do {
    		var randnum = Math.random();
    		rand1 = Math.ceil(imgnum * randnum);
    	} while (rand1 == useRand);
    	useRand = rand1;
    	document.images.randimg.src = 'loading.gif';
    	var im = new Image();
    	im.onload = function(){
    		document.images.randimg.src = this.src;
    	};
    	im.onerror = function(){
    		if(confirm('Image #' + useRand + ' missing. Try another?')){
    			swapPic();
    		} else {
    			document.images.randimg.src = fallback;
    		}
    	};
    	im.src = 'images/random/' + useRand + '.jpg';
    }
    Last edited by jscheuer1; 08-26-2011 at 12:06 PM. Reason: code efficiency
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •