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

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

12 голосов
/ 16 сентября 2009

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

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

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

Ответы [ 6 ]

20 голосов
/ 02 августа 2010

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

$(function()
{

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

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

});
});

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

13 голосов
/ 16 сентября 2009

Вы, наверное, уже знаете о $ (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();
});
9 голосов
/ 16 сентября 2009

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

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

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

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

3 голосов
/ 11 августа 2011

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

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

         your functions goes here !!!

});
3 голосов
/ 16 сентября 2009

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

1 голос
/ 16 сентября 2009

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

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