web-dev-qa-db-ja.com

JQueryは、ページの読み込みが完了するのを待ってから、スライドショーを開始しますか？

私は回転ヘッダー画像のあるサイトを持っています（あなたはそれらすべてを見てきました）。次のことを行いたい：

  1. ページ全体と最初のヘッダー画像を読み込みます
  2. ヘッダー画像のスライドショーをx秒ごとに移行するか、次の画像の読み込みが終了したときのいずれか遅い方に開始します

本当にこれを行う例は本当に必要ありません。

javascriptjqueryslideshowpreload
12
DevDevDev

$（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();
});
13
Jacob Marble

あなたが試すことができます

$(function()
{

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

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

});
});

私は同じ問題を抱えており、このコードは私のために働きました。それもあなたのためにどのように働くか！

20
Website-Chef

最初はjqueryのdocument.ready関数で実現できます

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

イメージの変更は、任意の数のプラグインで実現できます

必要に応じて、完全なプロパティで画像が読み込まれているかどうかを確認できます。少なくともmalsup jqueryサイクルのスライドショーでは、この関数を内部的に使用していることを知っています。

10
stimms

$（document）.readyメカニズムは、DOMが正常にロードされた後に起動することを目的としていますが、ページによって参照される画像の状態については保証しません。

疑問がある場合は、適切なol '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. これらの間隔の1つで、このイメージの完全な属性がtrueに設定されている場合、間隔はクリアされ、回転操作を安全に開始できます。

4
David Andres

これやってみましたか？

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

         your functions goes here !!!

});
3
Najib El Alam

JQueryに関数を渡すと、ページが読み込まれるまで実行されません。

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