Jump to content
GreenSock

isaballoon

Image load complete before Tweening engages?

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

A general question: Is it the case that images manipulated with Greensock tweening are fully loaded before Tweens are engaged? Is that a safe assumption?

 

Thanks.

Link to comment
Share on other sites

Hi,

 

It depens on what you're using to get your JS script going. In your case (for what I've seen of your samples) you're using window.onload = function(){}, and that function won't execute until everything in the DOM is completely loaded, meaning, styles, images, scripts, etc. So if you need your images to be completely loaded before tinkering with them, then window.onload is good.

 

But if you need your images to be positioned before they load and you'll use JS for that positioning, then window.onload won't cut it and then you'll need the DomContentReady event, which is not crossbrowser, so in that case I'll recommend you to use JQuery, Prototype or another JS library that takes care of the crossbrowsers issues for you. The reason is that GSAP tweens or animates css properties of DOM elements, which brings the issue of what part of an image IS the DOM element. Is it the image data itself (for example a landscape view)?, no , the DOM element is the <img> tag actually, and therefore the engine operates over that element. Then once all the tags in the html code are in the DOM, JQuery's $(document).ready(); will take action, but that doesn't mean that the images are loaded, what's in the document is the <img> tag but not the data of the image url which is ultimately what we're interested in.

 

My advice would be, if you're going to continue using window.onload, to create some sort of conditional logic outside that function for the animations working on the images, therefore nothing will happen unless every image is loaded (consider that we're talking about every image in the DOM so if you have a lot of image that could mean some patience from your visitors) and after that the animations could happen. Now that doesn't mean that you could take some action to the <img> tags outside the window.onload function, like positioning, changing opacity, etc.

 

If you want to try with a library, like JQuery there are some very useful plugins out there to help you with this, one that is very simple, small and gets the job done is this one from Krio:

https://github.com/krio/jquery-image-loader-plugin

This one allows to use a simple callback when an image is loaded or track when all the images you're interested in tracking are loaded to enable some particular action.

 

Before I used the load event (JQuery api) but it has been deprecated and it shouldn't work on some browsers, although I've just tried an old sample and worked fine with IE10, IE9, firefox 20, chrome 26, safari 5 and opera 12.

 

As you'll see there's a lot into it but it sounds more complicated than it really is, you have to find what works better for you and your projects.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hi;

 

I would suggest you using the jQuery promise() method;

 

http://jquerypromises.com/reference/

 

jQuery.promises.image("your image url").then(    function(img){        jQuery(img).appendTo($(yourelement));        TweenLite.to( $(yourelement), 1, {autoAlpha:1} );    },    function(){        //some fallback on image fail    });
  • Like 1
Link to comment
Share on other sites

Great stuff, Rodrigo. Thanks so much for the detailed explanation. 

Link to comment
Share on other sites

  • 2 weeks later...

Hi,

 

In case you or anyone else is interested David DeSandro (a twitter developer) just released today a great piece of code called Images Loaded. It has a stand alone version (no library dependencies) and a JQuery plugin, you can see it here:

http://desandro.github.io/imagesloaded/

 

Also has a progress setting and callbacks so that could work with what you're doing and it works with IE7+.

 

Hope this helps,

Cheers,

Rodrigo.

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.
×