jquery - 画像読み込み中のメッセージ

Question

私は自分のサイトに Nivo スライダーを含めましたが、うまく機能していますが、現在、フッターが押し上げられて少し混乱しているため、画像の読み込み時に何らかのメッセージを表示したいと考えています。画像の読み込み中に div などを追加する簡単な方法はありますか?

ここにコードがあります。いずれかのプロジェクトをクリックするだけです。

助けていただければ幸いです。

ありがとう！

Answer 1

読み込み中のコンテンツに最小の高さを設定します。フッターを押し下げます。

CSS: min-height: 200px;

読み込みメッセージに関しては、2 つの方法があります。

1. 画像の読み込み時に読み込みメッセージを置き換えます (AJAX、jQuery load() を参照)。
2. を使用して、画像の後ろに読み込みメッセージを配置しますposition: absolute。例: http://cssdesk.com/p3h9x

編集: Luke のアイデアも機能しますが、画像の読み込みにのみ適しています (テキストではありません)。

Answer 2

画像がロードされるまで使用される任意のスタイルはどうですか? 具体的には、カバーされるまで表示する最小の高さと背景画像です。

.nivoSlider img {
    background: url("https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif") no-repeat center center;
    min-height: 300px; /* or whatever you consider a reasonable minimum */
}