Jump to content
Search Community

I need help adding polite load functionality to my banner

Jeezihavenfi test

By Jeezihavenfi
in Banner Animation

Moderator Tag
 Share

Recommended Posts

Jeezihavenfi test

Jeezihavenfi

Posted
Posted

Hey gang,

 

It looks like some specs were a lot smaller than initially expected, and I need to add polite loading to my banner.

I understand that I need to wait for the page to load before loading the images in this banner - but I'm struggling to utlise the code below to load background images:
https://greensock.com/forums/topic/12356-gsap-polite-load-banner/?do=findComment&comment=51296

Any help would be awesome. Thanks all.

See the Pen eYmvWPO by jeezihavenfi (@jeezihavenfi) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey Jeez and welcome.

 

I highly recommend using your dev tools console when trying to fix projects such as this. You can view is by pressing F12. If you open it for the pen you posted above, you can see several errors.

  • You have some broken syntax related to the ImageLoader: var ImageLoader = function(path, dbug) {...}. Pasting in the actual code from the linked thread fixes that.
  • Then it says TimelineMax is not defined. I went ahead and included GSAP 3 and converted the code to GSAP 3 code for you.
  • The images then loaded and animated in! But this is because you have them as background images in your CSS. To load them via JS, you shouldn't have them there. 
  • I did a tiny bit more optimization related to the selectors in your timeline. You can compare the two to see how I changed them.
  • There's another error saying you can't appendChild a null object for container.appendChild(createImage(name, extension, path, className, id));. This is because an element with an ID of "holderElement" doesn't exist inside of the .load() call. And looking at it, the image names are not what you're wanting either. 
  • I changed the ImageLoader functionality to use backgroundImages instead since that is what you were using. I also changed how the images are loaded to make it a bit more simple.
  • Lastly I changed the timeline to fire once all images are loaded, not after the page is loaded.

Altogether we get this:

See the Pen XWJMPBB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However, it seems that even if you load a real <img> with the same URL, when you set the backgroundImage it loads the image again (always faster than before but still takes some time). So it'd probably be better to use real images instead of backgroundImages. How about you try to do it knowing the information that I posted here? If you still run into things you can't figure out, let us know.

 

A side note so that you're aware, on CodePen the stuff inside of the HTML section is intended to be the content inside of the <body>. You can load assets (like GSAP) by clicking the cog next to the "JS" label.

 

Happy tweening!

  • Like 2
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...