Загружать анимацию javascript ТОЛЬКО при загрузке всего сайта (изображений) - PullRequest
Новая
       17

Загружать анимацию javascript ТОЛЬКО при загрузке всего сайта (изображений)

1 голос
/ 19 мая 2011

Я создаю этот сайт, который сильно зависит от «тяжелых» изображений и анимации.

У него есть некоторые "Шторы", покрывающие весь сайт, тогда я хочу открыть эти шторы (анимировать, уже закодировал их), но только когда загружен весь мой сайт (особенно изображения).

Также хотел бы создать простой загрузчик (вообще никакого прогресса, просто скажите "загрузка");

ОБНОВЛЕНИЕ: 

$.ready(function() {
            $("#loading").fadeOut();
            $(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
            $(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);

            $(".leftback").stop().animate({ width: '60px' }, 6500);
            $(".rightback").stop().animate({ width: '60px' }, 6500);

    });

Ответы [ 5 ]

2 голосов
/ 19 мая 2011

попробуйте объединить jQuery`s ready и load 

$(document).ready(function()
{
    var images = $('img');
    var loadedImgs = [];
    images.each(function()
    {        
        $(this).load(function() //image load callback
        {        
            loadedImgs.push('');
        });
        // we are interested only if the images is loaded,
        // so we need to place something in the loadedImgs array;
    });
    var interval = setInterval(function()
    {
        if(loadedImg.length == loadedImgs.length)
        {
            clearInterval(interval);
           //your code here ... images were loaded !!!
        }
    },10);
});
2 голосов
/ 19 мая 2011

Использование 

window.onload = function() {
    // initialize site
};

Будет работать. Он запускается, когда все встроенное в сайт (HTML, CSS, изображения ...) завершает загрузку.

Затем вам нужно будет скрыть контент вашего сайта во время его загрузки. Если вы помещаете все в DIV, вы можете переключать видимость с помощью «видимость: скрытый». Не следует использовать «display: none», так как в некоторых браузерах (если я правильно помню, Opera) они не будут загружать контент, который не имеет отображаемого значения.

После этого вы сможете разместить DIV, содержащий ваше содержимое «Загрузка», в верхней части страницы, а затем либо просто отключить его отображение, либо удалить его из DOM после загрузки страницы.

В качестве примечания, вы не должны использовать функцию jQuery.ready (), как указано в RobG, так как она ожидает только загрузки DOM, а не изображений.

1 голос
/ 19 мая 2011

Поместите ваши обработчики внутрь window.load.Это срабатывает только после полной загрузки страницы, включая графику. 

$(window).load()
0 голосов
/ 19 мая 2011

Просто используйте: 

window.onload = function(){
    // javascript code will be executed only after the whole dom is loaded
}

С Jquery: 

$.ready(function(){
    // some code
});
0 голосов
/ 19 мая 2011

Используйте Event.observe в Prototype, как 

Event.observe(window, 'load', function()
    {
        //add javascript script tags to the document here
    }

Функция в Event.observe будет вызываться только после загрузки всех изображений в DOM.

...