1


かなり大きな画像をWebアプリケーションに読み込もうとしています。これらの画像の最大サイズは 2800x2800 です。それらをロードして表示すると、すべて正常に動作します。

私の問題は、それらが次を使用してロードされることです：

var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
  //display image
}

ロードされているかのように、大きな画像が上から下に徐々にページに表示されます。

これを視覚的に削除し、ブラウザで完全にロードしてレンダリングした後にのみ表示します。

この Web アプリはユーザーが元のサイズの 100% まで画像を拡大縮小することを目的としているため、画像サイズを変更することもできません。

レンダリングされるまで画像を非表示にする方法を知っている人はいますか? ロードされるまで非表示にすることができますが、それは基本的に私がやっていることであり、削除したいのはプログレッシブ レンダリング ディスプレイです。ありがとう

4

2 に答える 2

4

次のようなタグのonload属性を使用します。<img>

<img src="huge.jpg" style="display:none" onload="this.style.display='block'">

エフェクトに必要なものは何でも代用できますが、それonloadはあなたのフックです。

デモ: http://jsfiddle.net/DfCUQ/1/ (注:?nocache=Xデモをロードするたびに更新します)

于 2012-08-23T22:09:07.983 に答える
0

onload イベントが呼び出されるまで、css の可視性を「非表示」にして、画像の代わりにテキスト (または読み込みスピナーなど) を配置することができます。

于 2012-08-23T21:59:23.557 に答える