Jump to content
Search Community

Get percent of images loaded on page for tweening preloader

martis test
Moderator Tag

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

Hey guys,

 

Sorry this is a little off topic, but I really trust the advice on this forum.

 

I have seen many solutions for "preloaders" but can't find the simple thing I am looking for.

 

What I would really love is a simple script that spits out a percent value of images that have loaded on the page so I can tween an element of my choosing using that percent value.

 

Does anyone have something they use and trust that simply gives a percent value?

 

Thanks!

Link to comment
Share on other sites

Hi,

 

There isn't any tool in JS, that I know of, that works in the same way ActionScript preloading did (men I miss that every single day). Basically if you have 10 images every time an image is loaded the percentage will increase in 10 percent. What you can do is translate that into a tween progress and then pass that progress into a DOM element to inform some sort of progressive preloading.

 

I made this sample some time ago using David DeSandro's Images Loaded:

 

See the Pen ohylp by rhernando (@rhernando) on CodePen

 

It's made with jQuery and basically relies on the deferred object to inform the progress when an image has been loaded.

 

Another option is use jQuery's Ajax with the deferred object to use callbacks everytime an image is loaded:

var urlArr = [],//this array contains all the images url
    totalImg = urlArr.length,
    loadedImg = 0,//the amount of images that are loaded
    progressUnit = 1/totalImg,//how much progress a single image is
    progressBox = $("#progressBox"),// here we'll put the percentage
    progressObj = {percentage:0},// we'll tween this object property from 0 to 100
    progressTween;

progressTween = TweenLite.to(progressObj, 1, 
{
  precentage:100,
  onUpdate:updateProgress
});

function updateProgress()
{
  progressBox.html(Math.round(progressObj.percentage)+"%");
}

for(var i = 0; i < totalImg; i++)
{
  //make the ajax call to the url
  $.get(
    urlArr[i],
    function()
    {
      loadedImg++;
      //a new image is loaded so we increase the loaded percentage
      TweenLite.to(progressTween, 0.25, {progress:loadedImg*progressUnit })
    }
  );
}

Now if you don't want to use jQuery you can use basically the same idea in the previous example but with the onload event.

  • Like 3
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.
×
×
  • Create New...