15

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

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

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

4

6 に答える 6

23

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

$(function()
{

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

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

});
});

私は同じ問題を抱えていました、そしてこのコードは私のために働きました。それがあなたにとってもどのように機能するか！

于 2010-08-02T09:52:47.670 に答える
15

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

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

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

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

于 2009-09-16T04:02:42.513 に答える
13

$（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();
});
于 2009-09-16T04:22:36.543 に答える
6

$（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に設定されている場合、間隔はクリアされ、回転操作を安全に開始できます。

于 2009-09-16T04:07:07.403 に答える
3

これを試しましたか？

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

         your functions goes here !!!

});
于 2011-08-11T15:32:44.620 に答える
1

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

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>
于 2009-09-16T04:01:12.283 に答える