Jump to content
GreenSock

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

$(window).load doesn't work with hosted Jquery?

Go to solution Solved by Jonathan,

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 using $(window).load to set the visibility of my 'container' div back to visible again once all DOM has been loaded. This works when I'm using a downloaded copy of jquery. But when I use the Google hosted version it's not? That's what I've found out anyway. Or perhaps I'm doing something wrong? I've shortened my test code to below

<!DOCTYPE html>
<html>
<head>
	<style>
		body{
			background-color:#3a90eb;
		}
	}
</style>
</head>

<body>
	<div id="container">
		TEST
	</div>


	<!-- Jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>	


	<script>
		$(window).load(function() {
			alert("success");
		});

	</script>

</body>
</html>
 

It should show an alert box when all is loaded, but it doesn't when I open the html. It does however open an alert box when I use $(window).ready instead. @(window).load does work when I reference a local Jquery library file. So is there a reason it doesn't work when I use a Google hosted version instead?

Link to comment
Share on other sites

  • Solution

Hello jiggy1965, and Welcome to the GreenSock Forum!

 

Keep in mind that jQuery has deprecated the load() method since version 1.8 and removed it from jQuery version 3.0.

 

https://api.jquery.com/load-event/

 

So if your using jQuery version 3.0 or higher you can no longer use the load() method.

 

You can either try and use the on() method or bind() method. The on() method is good if your element might not be there when the page loads so jQuery can keep listening for your element.

// using the on() method
$(window).on("load", function() {
    alert("success");
});

// or use bind() method
$(window).bind("load", function() {
    alert("success");
});

// but i would make sure the DOM is ready first before checking if the window is loaded
$(document).ready(function(){

   $(window).on("load", function() {
	alert("success");
   });

});

Happy Tweening? :)

  • Like 3
Link to comment
Share on other sites

  • 3 years later...

jQuery: onload() Vs. $.ready()? 

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

 

The key difference between $(document).ready() and $(window).load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document).ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

 

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