JQuery ждет завершения загрузки страницы перед запуском слайд-шоу?

Вы, вероятно, уже знаете о $(document).ready(...). Что вам нужно, так это механизм предварительной загрузки; что-то, что извлекает данные (текст, изображения или что-то еще), прежде чем показывать их. Это может сделать сайт более профессиональным.

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

Вот как легко начать работу с jQuery.Preload:

$(function() {
  // First get the preload fetches under way
  $.preload(["images/button-background.png", "images/button-highlight.png"]);
  // Then do anything else that you would normally do here
  doSomeStuff();
});

можешь попробовать

$(function()
{

$(window).bind('load', function()
{

// INSERT YOUR CODE THAT WILL BE EXECUTED AFTER THE PAGE COMPLETELY LOADED...

});
});

у меня была такая же проблема, и этот код работал для меня. как это работает и для вас!

Ну, первое может быть достигнуто с помощью функции document.ready в jquery.

$(document).ready(function(){...});

Изменение изображения может быть достигнуто с помощью любого количества плагинов.

• http://malsup.com/jquery/cycle/
• http://www.matto1990.com/jquery/slideshow/

Если вы хотите, вы можете проверить, загружены ли изображения с полным свойством. Я знаю, что, по крайней мере, слайд-шоу цикла malsup jquery использует эту функцию внутри.

Механизм $(document).ready предназначен для запуска после успешной загрузки DOM, но не гарантирует состояние изображений, на которые ссылается страница.

Если вы сомневаетесь, воспользуйтесь старым добрым событием window.onload:

window.onload = function()
{
  //your code here
};

Теперь это явно медленнее, чем подход jQuery. Однако вы можете найти компромисс где-то посередине:

$(document).ready
(
  function()
  {
    var img = document.getElementById("myImage");

    var intervalId = setInterval(
                        function()
                        {
                          if(img.complete)
                          {
                            clearInterval(intervalId);
                            //now we can start rotating the header
                          }
                        },
                        50);
  }
);

Чтобы немного объяснить:

1. мы захватываем элемент DOM изображения, изображение которого мы хотим полностью загрузить

2. затем мы устанавливаем интервал для срабатывания каждые 50 миллисекунд.

3. если в течение одного из этих интервалов для полного атрибута этого изображения установлено значение true, интервал очищается и операция поворота может быть безопасно запущена.

ты пробовал это?

$("#yourdiv").load(url, function(){ 

         your functions goes here !!!

}); 

Если вы передадите jQuery функцию, она не запустится, пока страница не загрузится:

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>