5

私のCMSプロジェクトには、JavaScriptを使用して画面上でフェードアウトするスタイリッシュなWeb2.0ログイン画面があります。画像がプリロードされていることを120％確認したにもかかわらず（開発ツールでリソースモニターを使用した）、ログイン画面が表示されたときに画像が表示されるまでに1秒かかるのはなぜですか。それは完全に空想を破壊します！見てください：

http://www.dahwan.info/Melior（リンクが壊れています）

ログインをクリックすると、75％アルファ1pxpng画像を使用して画面が暗くなります。画像はプリロードされていますが、アニメーションが完了するまで表示されません。ただし、[キャンセル]をクリックして再度ログインすると、アニメーションがスムーズかつ完全に流れます。

誰かがこの問題の解決策を考えることができますか？私はCMSのGUIの残りの部分でもそれを持っています。これまでに画像のプリロードがなかったようです。

答えてくれてありがとう

編集：ああ、はい、私は現在Google Chrome 5.0.375.99用にこのCMSを開発しており、後でマルチブラウザの互換性を追加しています。省略してすみません

4

4 に答える 4

2

私は自分の問題の回避策を考え出しました。これを2台の異なるコンピューターの3つのブラウザーでテストしたところ、完璧な結果が得られました。つまり、JavaScriptの画像プリロード関数で、各画像を非表示のDivタグでDOMに追加しました。

$('#img_preload').append($('<img />').attr('src', img.src));

現在、画像はページの読み込み時にDomに追加されており、私の理論によれば、ローエンドコンピューターのメモリに保存されているため、CMSで必要なときにすぐに表示されます。

コメントしてくれてありがとう ：）

于 2010-07-12T19:13:18.663 に答える
2

この問題に関する有用な情報：

Codemonkeyソリューションが機能するのは、画像を非表示のdivに配置することで、ブラウザーがそれらの画像をメモリに保持し、divの可視性が変更される可能性に備える必要があるためです。ユーザーがdivの可視性を非表示からブロックに変更する必要がある場合は、即座に実行する必要があります。これが、すべての画像を配列にロードするだけでは正しく機能しない理由です。

于 2010-07-13T17:49:39.720 に答える
1

それらをアレイにプリロードすることもできます。あなたの問題は「ガベージコレクション」として知られているものによって引き起こされるかもしれません。これは、ブラウザがメモリを消費しているオブジェクトを探す場所であり、画面上にインスタンスがなく、メモリ内の他のオブジェクトから参照されていません。

ただし、画像をWeb時代にプリロードする場合は、画像をキャッシュにロードする必要があります。したがって、再度参照すると、それらは引き続き再表示されます。ただし、これらのタイプのファイルに対してキャッシュの有効期限が十分に長く設定されていない場合も、イメージが消えることがあります。

問題はブラウザ固有の場合もあります。プリロードされたコンテンツを画像配列に配置し、必要に応じてその配列を使用して画像を呼び出すことにより、コンテンツの「アンカー」を作成するのが常に最善であることがわかりました。画像のURL（URI）の代わりに。

これは、このトピックをカバーする簡単で汚い記事です。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

于 2010-07-12T21:06:12.297 に答える
0

UIスレッドは、一度に1つのタスクしか管理できません。JavaScriptを実行するか、UIを更新します。画像をプリロードするコードの前にJavaScriptの解析/実行が多い場合は、遅延が発生している可能性があります。

もう1つの提案は、ページで画像が検出されるまで、ログインリンクのクリック機能を無効にすることです。

これを行うのはかなり簡単です
。functiondisableBtn（el）{
var btn = document.getElementById（el）;
var btnId = btn.id;
btn.disabled = true;
}

再度有効にするには、btn.disabled = falseに設定します（イメージがDOMに追加されたことを検出した後）。

于 2010-07-12T19:12:12.787 に答える