0

画像要素にURLを割り当てるときに、読み込みアイコンを表示する必要があります。私はこのサイトの他の質問を見てきましたが、ページをロードするときに画像の優雅なプリローダーを表示する方法についてのみ詳しく説明しています。私が必要としているのは、ページがロードされた後にプリローダーを表示することです。私が探しているものには2つのシナリオがあり、以下で説明します。

  1. DOM画像要素を動的に作成し、この要素にURLを割り当てます。その間、要素に画像が表示されるまでに約2〜3秒かかり、その領域は2〜3秒間空白になります。私がする必要があるのは、プリロードアイコンを表示し、画像がロードされたらそれを非表示にすることです。

  2. DIV画像要素を動的に作成し、URLをに割り当てますbackground:url()。その間、要素に画像が表示されるまでに約2〜3秒かかり、その領域は2〜3秒間空白になります。私がする必要があるのは、プリロードアイコンを表示し、画像がロードされたらそれを非表示にすることです。

両方のシナリオでプリローダーを表示するにはどうすればよいですか？

4

2 に答える 2

1

load() イベントを使用して実行できます。

最初にロードを開始するときは、プリローダーを表示するように画像を変更するか、それを実行したい方法に変更します。また、それに「load」イベントを添付します。

次に、イメージがロードされたら、プリローダーを削除してイメージを表示します。

CSS 関連のもの (背景 URL) についても同様のトリックを行う必要があります。あなたができることはnew Image()、背景のURLをプリローダーアイコンに設定しながら、（を作成して）画像を直接ロードすることです。

次に、イメージがロードされたら、切り替えを行います。ブラウザは、どこで使用されているかに関係なく、画像を 1 回しか読み込まないため、同じ効果があるはずです。

于 2012-12-11T09:56:20.517 に答える
0

これを行うための優れたチュートリアルとスクリーンキャストがあります：http：//jqueryfordesigners.com/image-loading/

一部のブラウザ（古いバージョンのIEなど）では、.load（）関数は画像に対してあまりうまく機能しませんが、その場合は、.loadの代わりにhttps://github.com/JessThrysoee/jquery.imageloadを使用できます。 （）より一貫性のあるクロスブラウザエクスペリエンスを実現します。

于 2012-12-11T10:01:02.150 に答える