0

Nivo SliderNivoSliderを画像カルーセルとして使用しています。ただし、PowerPointプレゼンテーションを埋め込む必要があったため、すべてのスライドを合計約3.5MBのJPG画像に変換しました。これで、すべての画像が読み込まれるまでしばらく時間がかかります。ただし、読み込み中は、含まれているdiv領域は完全に空で、ページの背景が表示されます。

私の質問は、36枚の画像すべてが読み込まれているときに、ある種の読み込みインジケーターを表示できるかどうかです。可能な別のオプションは、最初の画像のみが読み込まれるように画像の遅延読み込みを実行することです。ユーザーが次の矢印をクリックして次の画像に移動すると、画像が読み込まれます。これらのオプションのいずれかが可能ですか？

編集：以下のコメントに応えて-画像は静的なimgタグでロードされます

4

1 に答える 1

0 
$(window).load(function() { 
    //all resources including external are loaded
    //remove loading messages and fadein presentation
    }); 

$('#presentation img').load(function(){
    //track individual image load
    //you can keep a gloabl count and increment as each image load is triggered
    });

遅延読み込みの場合：

画像の場所をJsonとして保持し、外出先で画像要素を作成してプレゼンテーションに追加します。

編集

上記は一般的なアプローチですが、nivoスライダーの場合、ロードインジケーターなどが既にあるように見えますが、他に何を探していますか？読み込み中の画像を追加するのを忘れましたか？

説明：

関連付けられたHTMLページがブラウザに完全に読み込まれ、対応するDOMが作成されると、DOM準備完了イベントが発生します。このとき、画像などの外部リソースが完全に読み込まれない場合があります。

画像を含むすべてのリソースが読み込まれ、ページをレンダリングする準備ができると、ウィンドウ読み込みイベントが発生します。

nivoスライダーでは、次のスタイルを使用します。

.theme-default .nivoSlider img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

そのため、画像は表示されないため、最近のブラウザではデフォルトで読み込まれません。window.loadは、すべての画像が実際に読み込まれる前にトリガーされます（画像は非表示になっているため、ページを表示する必要はありません）

于 2012-07-19T23:49:00.333 に答える