0

私は1 ページの Web ポートフォリオを持っています。各プロジェクトの写真は、jQuery Lemmon Sliderプラグインを介して割り当てられたコントロール/アニメーションを含む画像カルーセルに表示されます。このプラグインは で初期化する必要がありますwindow.onload。

ただし、画像は比較的大きく (ページにはより多くのプロジェクトが存在します)、window.onloadすべての画像がダウンロードされるまでイベントはトリガーされないため、そのイベントが発生するまでカルーセルは使用できません (現在、ブロードバンド接続で約 5 秒)。

問題は、カルーセルでプラグインを強制的に呼び出す方法(画像を遅延ロードしている間)、または画像とコントロールをバックグラウンドでロードしている間にロード中のスピナー gif を表示して表示する方法 (割り当てられたプラグインを使用) です。コントロール）準備ができたら？

私の index.php の関連部分の擬似コードは次のようになります。

- for every directory in 'projects/':
    - read the directory
    - generate the carousel and put all the images in the code <div> <ul> <li> <img>
    - assign this project's carousel ID
- at the end of the page, initialize the plugin for every carousel there is through the window.onload event

私を助けるために必要なすべての情報を提供したことを願っています。私は熱心に答えを待っています。

4

1 に答える 1

0

さて、ページの読み込み時にプラグインを初期化する必要があるが、必ずしも onload イベントによってではないということを意味している場合は、jquery "ready" を試すことができます。

$("#spinning").ready(function(){
    $(this).show();
});
$(".carousel").ready(function(){
    $("#spinning").hide();
});

そして、この「回転」要素をカルーセルの外側に (子としてではなく)、おそらくカルーセルの外側のボディまたは div のすぐ下に配置し、カルーセルの中心に絶対に配置します。

このように、回転する要素の準備が整うとすぐに (もちろん、重いカルーセルの準備が整う前に)、表示されて回転します。カルーセルの準備が整うと、gif の回転が停止して消えます。

注: document.ready はドキュメントの準備ができたら実行され、.ready はその要素の準備ができたら実行されます。対照的に、window.onload はすべての要素の準備が整った後に実行されます。したがって、オンロードするよりも、最初に準備してください。それが順番です。

于 2013-08-25T12:34:20.613 に答える