In jQuery when you do this:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.
Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?
The best way I have is to use <body onload="finished()"> , but I don't really want to do that unless I have to.
Note: There is a bug in jQuery 1.3.1 in Internet Explorer which actually does wait for all images to load before executing code inside $function() { } . So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.
Source: Tips4all
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.
ReplyDeleteThe difference can be seen in the following complete HTML file, provided you have a jollyroger 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="jollyroger00.jpg">
<img src="jollyroger01.jpg">
// : 100 copies of this
<img src="jollyroger99.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() {
// weave your magic here.
});
I wrote a plugin that can fire callbacks when images have loaded in elements, or fire once per image loaded.
ReplyDeleteIt is similar to $(window).load(function() { .. }), except it lets you define any selector to check. If you only want to know when all images in #content (for example) have loaded, this is the plugin for you.
It also supports loading of images referenced in the CSS, such as background-image, list-style-image, etc.
waitForImages jQuery plugin
GitHub repository.
Readme.
Download tar.gz.
Downlod zip.
Example Usage
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
Example on jsFiddle.
More documentation is available on the GitHub page.
$(window).load() will work only the first time the page is loaded. If you are doing dynamic stuff (example: click button, wait for some new images to load), this won't work. To achieve that, you can use my plugin:
ReplyDeletehttp://plugins.jquery.com/project/BatchImagesLoad