JavaScriptイベントでブラウザ画像をロードしますか？
https://stackoverflow.com/questions/3717852
-
02-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
タブ付きDIVSを使用しているため、最初はビューから隠されています（つまり、CSSディスプレイを使用していくつかのDivを隠します：なし）。
したがって、ページの読み込みをすると、すべての画像をロードするには年齢が必要です。これは、ページが遅いように見えます（ブラウザのロードバーが10秒以上完了しないため）。
画像がページに表示されるまでロードしない方法が欲しいです。
私は遊んでいた jquery lazyload, ただし、これはブラウザをスクロールするときにのみ画像をロードするようです（Tabbed Divsでは機能しません）。
したがって、このように機能するために怠zyloadを変える方法はありますか、それともこれを行うより良い方法はありますか？
ありがとう！
解決 6
私は以前にこれに気づいていませんでしたが、Lazyloadはイベントからのトリガーをサポートしています。
http://www.appelsiini.net/projects/lazyload
誰かが私がこれをどのようにしたかについての手を必要とするなら、私に知らせてください！
他のヒント
多分 jQueryタブ タブでAjax呼び出しを使用して、必要なことをすることができます...
隠されたDIVをどのように表示しますか？
攻撃の1つの計画：
IMGタグのSRC属性に画像URLを配置する代わりに、他の場所（例えば、その上に特定のクラスがある隠されたスパン）を置き、DIVを表示するときは、すべてのIMGタグを繰り返してSRCをURLに設定しますそれは持っていたはずです。
方法として、それは間違いなくいくつかの欠点を持っています。
HTML5 Doctypeを使用している（または使用できる）場合は、タグ属性の「data-」プレフィックスを使用できます。
<img src="" data-src="/path/to/image" style="display: none" />
そして、JavaScriptを使用して、SRCにデータSRCを埋めることができます。
$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
あなたの唯一の目標が、多数の画像のために非常に長くかかっている進歩バーを「隠す」ことである場合、私は何らかのAjaxソリューションを求めます。 HTML要素をロードしたい方法（および場合によっては）に複雑さをもたらします。
私は個人的には、元の目的以外にHTML属性を使用するのが好きではないので、別の属性にパスを保存し、必要に応じて切り替えることは私の最初の選択肢ではありません。代わりに、JavaScriptアレイ（ID =>パス）を作成し、必要に応じて個別のHTML IMG要素を更新しようとします。
幸運を！ ;）
私は最近それを試しましたが、これはもうJSでは不可能だと言わざるを得ません。たぶんそれは一度もなかったかもしれません... Lazyloadのようなプロジェクトは、すべての画像がスタートアップでロードされるのを止めることを常に宣言してきましたが、FireBugではこれが機能しないことがわかります。画像は、domreadyとスクロールを開始するときに2回もロードされます...
あなたの唯一の選択は、手元にあるか、または次のようなことをすることです：
<img src="transparent.gif" alt="" rel="real image source" />
次に、Divが表示されたときに属性を切り替えて、画像が読み込みを開始します。
少なくともGoogleインデックスを作成する必要がない場合は、これも正常に機能します。
それが役立つことを願っています！ :)
編集：うーん、なぜ私は答えを与えたときに-1を取得したのですか？ Lazyloadのページを見て、Firebugを有効にしてから、ページをスクロールしてください。 StackoverflowやLazyloadプラグインのコメントで、これが現時点で唯一のソリューションであるとさえ言われました... :(
