Skip to main content
E
eddieappell
Participant
April 10, 2009
Question

Preload next photo in slideshow?

  • April 10, 2009
  • 1 reply
  • 1239 views

I'm trying to help a friend with her Flash slideshow by getting it to preload the next photo (from a folder of numbered jpgs) when the current photo is done loading, but I can't quite get it worked out and I'm not sure what I'm missing...  What I thought I might try is to have two movie clips to hold photos, one on the stage and one off the stage.  I would load the current photo into the movie clip on the stage (pictures.slides) and when that finishes I would load the next photo in the movie clip off the stage (pictures.preloadNextPhoto) so that it would already download the image and would load faster when the user clicks "Next".  It doesn't work.  I won't load the whole script in here, but this is the movieloader function with the meat of the functionality:

function startLoading(Image) {
  var MCL = new MovieClipLoader();
  MCL.loadClip(Image, pictures.slides); 
  
/* THIS IS THE BIT WHERE I TRY TO PRE-LOAD THE NEXT PHOTO */
  var nextImageNum = (_level0.picture < _level0.totalPictures) ? _level0.picture + 1 : 1;
  var nextImage = folder + nextSlideNumber() + nextImageNum + ".jpg"
  MCL.loadClip(nextImage, pictures.preloadNextPhoto);
  
  MCL.onLoadComplete = function() {
    pictures.loader_txt.text = "";
  }; 
  
  MCL.onLoadProgress = function () {
    
    var loadProgress = MCL.getProgress(pictures.slides);  
  loadedBytes = loadProgress.bytesLoaded;
  totalBytes = loadProgress.bytesTotal;
  
    percentage = Math.floor(loadedBytes/totalBytes*100);
  pictures.loader_txt.text = percentage+"%";  
  };
  
  MCL.onLoadError = function (){      
    pictures.loader_txt.text = "Picture not available";
  };  
}

Is there an easier way to do this?  Any examples of how this might work better?

Thanks for the help!!

Eddie

This topic has been closed for replies.

1 reply

Ned Murphy
Ned Murphy
Legend
April 10, 2009

To load the next image after the first is done loading, you want to utilize the onComplete to start the next loading.  What I recommend is to break down your one function into mutliple functions and then manage the calling of them as needed. You essentially want one function that loads and triggers the onComplete function to initiate the next image loading.

While I could provide you with a coded solution, which someone may do anyways, I prefer to see if you can resolve it by thinking it thru.

E
eddieappellAuthor
Participant
April 10, 2009

Fair enough, but could you tell me if this method will actually preload the image into browser cache, or make it so when it does load into the movieclip on the stage, it will load faster?

Here's what I came up with, based on your recommendation:

function startLoading(Image) {
 
   var MCL = new MovieClipLoader(); 
   MCL.loadClip(Image, pictures.slides); 
   
   MCL.onLoadComplete = function() {
     pictures.loader_txt.text = "";
     var nextImageNum = (_level0.picture < _level0.totalPictures) ? _level0.picture + 1 : 1;
     var nextImage = folder + nextSlideNumber() + nextImageNum + ".jpg"
     loadNextPhoto(nextImage);
   };    

} 
function loadNextPhoto(nextImgPath) {

   var MCL = new MovieClipLoader(); 
   MCL.loadClip(nextImgPath, pictures.preloadNextPhoto);

}


(Removed the onLoadProgress and onLoadError to focus the code on the current issue)

I think this will work, but I'm not entirely sure that loading the photo into another, off-screen movieclip will basically "pre-load" the image file...?

Thanks for the help!

Eddie

Ned Murphy
Ned Murphy
Legend
April 10, 2009

If you are preloading it, it will already be in hand when you need it, provided it has finished loading.  If you are loading it into something off stage, it will most likely be there immediately when it's called upon.

If there are only the two images, then what you have should work well enough.  You probably could have further simplified it it by having the loading function work for both images, but if they don't have similar destinations your approach is fine.  Actually, where I normally come from... if it works, it's fine.  It would be better to have the oncomplete function work for both images, but you'll know better than anyone if it's really necessary.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices