With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) 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 lot of jollyrogerNN 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>
? ? ? ? Hello
? ? ? ? <img src="jollyroger00.jpg">
? ? ? ? <img src="jollyroger01.jpg">
? ? ? ? // : 100 copies of this in total
? ? ? ? <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).on("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 could use something like:
$(window).on("load", function() {
// weave your magic here.
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
