jQuery and JavaScript Blended - Error When Trying to call $(window).load

[birdiegolden]

Hi all. I am trying to have an script fire ONLY after all images are loaded.

Here’s the page I have this running on. It’s the logo animation I’m trying to prevent from firing until after the images have loaded.

https://stable.stable-demos.com/blakes-seed-based/

When I add:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // THIS ERRORS
    $(window).load(function() {
          alert("window load occurred!");
    });

    // THIS WORKS BUT LOADS BEFORE IMAGES ARE LOADED SO THE LOGO MESSES UP ON HEAVY IMAGE PAGES
    jQuery(function($){
    // SMOOTH OUT TRANSITION - STABLE LOGO
		$('.qodef-page-header').waypoint(function(direction) {
		// Target this element and run the up or down animation respectively

			if (direction === 'down') {
				$(".fadeMe").addClass("blur-in-fwd");
				$(".fadeMe").removeClass("blur-in-bkw");
				$("#smooth-logo").addClass("slideLeft");
				$("#smooth-logo").removeClass("slideRight");
				$("#animOut").get(0).beginElement(); // restart the animation
			} else if (direction === 'up') {  
				$(".fadeMe").addClass("blur-in-bkw");
				$(".fadeMe").removeClass("blur-in-fwd slide-right");
				$("#smooth-logo").addClass("slideRight");
				$("#smooth-logo").removeClass("slideLeft");
				$("#animIn").get(0).beginElement(); // restart the animation
			}
		}, 

		{ offset: "0%" })
});


<!-- end snippet -->

I get a console error.

Let me know if there’s anything else i can do to help get this figured out!

You can see the animation working correctly here so you know what it does without the console error. This is the logo I want to stop from running until the entire page is loaded.

http://gne.95f.myftpupload.com/blakes-seed-based/ (scroll down to enable the animation)

Thank you in advance!

[m_hutley]

“I get a console error”

what error? It’s nice to know you got an error, but if you don’t tell us WHAT error, it’ll be a lot harder to guess at the problem

[m_hutley]

Oh wait. I can guess. It says “$ is not defined”.

Look a little further down your code.

jQuery(function($){
notice how this line is defining $ for the rest of the code inside it.

Welcome to the wonderful world of Wordpress ****ing with JQuery.

Try this instead:

jQuery(window).load(function($) { alert("window load occurred!"); });

[birdiegolden]

Update! I used jQuery, removed the $ in the function parens, changed $ to jQuery and it looks like it’s working now
I don’t know why it kept throwing an error if I tried to put my Smooth Logo code into your updated jQuery function($) but it’s working now!

I officially owe you a keg xD