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

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

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

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

Ответы

Ответ 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();
});

Ответ 2

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

$(function()
{

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

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

});
});

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

Ответ 3

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

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

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

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

Ответ 4

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

Если вы сомневаетесь, вернитесь к событию good ol.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);
  }
);

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

  • мы захватываем элемент DOM изображения чей образ мы хотим полностью загружен

  • то мы устанавливаем интервал огонь каждые 50 миллисекунд.

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

Ответ 5

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

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

         your functions goes here !!!

});

Ответ 6

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

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