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

Question

У меня есть сайт с вращающимся заголовком изображения (вы все их видели). Я хочу сделать следующее:

1. Загрузите всю страницу плюс первое изображение заголовка
2. Запускайте переход слайд-шоу изображения заголовка каждые x секунд или после завершения загрузки следующего изображения, в зависимости от того, что произойдет позже

Мне действительно не нужен пример, который действительно делает это.

Answer 1

Вы, наверное, уже знаете о $(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();
});

Answer 2

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

$(function()
{

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

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

});
});

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

Answer 3

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

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

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

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

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

Answer 4

Механизм $(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. если в течение одного из этих интервалов для атрибута complete этого изображения установлено значение true, интервал очищается и операция поворота безопасна для запуска.

Answer 5

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

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

         your functions goes here !!!

}); 

Answer 6

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

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