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...

});
});

iにも同じ問題があり、このコードはうまくいきました。どのように機能するのか！

Answer 3

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

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

画像の変更は、任意の数のプラグインで実現できます

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

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

Answer 4

$（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. これらの間隔のいずれかで、 この画像の完全な属性は 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>