Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Cinoklu

Custom Javascript Preloader

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm still getting used to the Javascript world since unfortunately as flash web developer I have

to make the gradual shift because of handheld devices.

 

My question is how to create a preloader in Javascript using maybe Greensock plugin.

I'm used to something like this in Flash

 

 

function LoadingImageImage1(event:ProgressEvent)

{

var percent:Number = Math.round( ((event.bytesLoaded)*100)/(event.bytesTotal) );

ImageLoaderFeedback.scaleX = (percent/100);

 

if( percent == 100)

{

TweenMax.to(ImageLoader2, 1, {delay:0.8,autoAlpha:0, ease:Cubic.easeOut});

}

 

}

 

Can anybody point me to the right direction of what I need to do.

 

Thanks

 

Cinoklu

Link to comment
Share on other sites

Hi

 

Currently there isn't a javascript version of GreenSock's LoaderMax.

Please check out the example Randall provides here:

http://forums.greensock.com/topic/6338-animating-and-controlling-image-sequence/page__p__22958#entry22958

 

for a look at setting up an array of images to load in sequence. It makes for a nice starter template.

 

You can also look into preloadJS http://createjs.com/#!/PreloadJS I haven't used it but it appears to offer some nice functionality.

 

-c

  • Like 1
Link to comment
Share on other sites

Thanks Carl.

 

Thanks for your tutorials as well btw :). I'm a fan of your work.

Link to comment
Share on other sites

Also, another integration would be placing your "need to load" asset file paths into a main array and then loop through that array and load that type of item. They could be images or other files like jQuery AJAX calls to web services, XML, JSON, etc.

 

Then you simply iterate through that loading array of assets and simultaneously check the position of the current asset being loaded in which to drive a progress bar or increment some other visual element until the max length of the loading array is reached. It's not perfect but it does provide some sense of progress other than a looping animated GIF image.

 

So if you have 47 images, 2 xml files and a 1 JSON AJAX web services request, you have 50 total 'assets' to load and each 'array index' that is being loaded is therefore equivalent to a factor of 2 on a progress bar from 0 to 100.

 

Just remember to have a 'complete' or 'success' event fire off after loading each asset item in the array so that you can increment to the next asset to load and simultaneously update the progress bar.

var assetsToLoadArray = [
 'image1.jpg',
 'image2.jpg',
 'image3.jpg',
 'image4.jpg',
 //.. and so on up to 47 images...
 'setup.xml',
 'configuration.xml',
 'http://www.somedomain.com/api/getJSONData?id=1234'
];
var totalAssets = assetsToLoadArray.length; // 50 total assets
var currentAsset = 0; // refers to the first index in the array to load
var progressFactor = Math.round(100 / totalAssets); // equals 2

function someLoadLoopCode(){
 // loop code to iterate and load each asset by extension/file type
 // do a string search on each asset to load and find it's file type
 // and perform the appropriate conditional 'if' below
 //   if .jpg use the new Image(); and its onload callback event
 //   if .xml use jQuery AJAX and its success callback event
 //   if http:// use jQuery AJAX and its complete event
 //	  each 'if' above would result in calling loadNextAsset()
 //	  to keep the iteration through all of the assets in the array
}

// need a function that is called for the load finished callback events
function loadNextAsset(){
 currentAsset++;
 setProgress();
 if(currentAsset == (totalAssets - 1)){// check to see if on last item
// all items loaded
// do final callback or other code once all assets loaded
 }else{
// load next item code
someLoadLoopCode();
 }
}

function setProgress(){
 var progress = Math.round(currentAsset * progressFactor);
 if(progress > 100){
progress = 100;
 }else if(progress < 0){
progress = 0;
 }
 // code here to set the progress to its visual element or text, etc.
}

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×