Let’s say though that I want some animation and I don’t want it running until all the images are loaded. Here is the way how to do this.
With jQuery, normally we use
$(document).ready()
to execute something when the DOM is loaded and
$(window).load()
to execute something when all other things are loaded as well, such as the images.
With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).load() to execute something when all other things are loaded as well, such as the images.
The difference can be seen in the following complete HTML file, provided you have a test JPEG files (or other suitable ones):
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("done");
});
</script></head><body>
</head><body>
Hello
<img src="test1.jpg">
<img src="test2.jpg">
// : 200 copies of this
<img src="test200.jpg">
</body>
</html>
With that, the alert box appears before the images are loaded, because the DOM is ready at that point. If you then change:
$(document).ready(function() {
into:
$(window).load(function() {
then the alert box doesn’t appear until after the images are loaded.
Hence, to wait until the entire page is ready, you can use something like:
$(window).load(function() {
// add your code here
});
The post How to jQuery wait untill all images to loaded. appeared first on Excellent Web World.