воскресенье, 11 ноября 2012 г.

jQuery. Ожидание загрузки всех изображений


Используя jQuery часто употребляют событие $(document).ready() для выполнения каких либо действий, когда DOM загружен или$(window).load() для выполнение действий, когда загрузилась остальная часть содержания страницы, например изображения.
Разницу вы можете увидеть на примере следующего HTML файла:
<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="image.jpg">
        <img src="image01.jpg">
        <img src="image99.jpg">    </body>
</html>
В этом случае вы получил alert перед тем, как будут загружены все изображения, так как событие отреагирует исключительно на окончание загрузки DOM. Если мы поменяем:
$(document).ready(function() {
на:
$(window).load(function() {
то alert отобразится только после загрузки всех изображений.
Поэтому, если вы посредством javascript хотите поменять верстку или выполнить действия с содержанием, в котором есть изображения, то следует использовать только такой подход:
$(window).load(function() {
    // weave your magic here.
});