2

たくさんの画像を含むページがありますが、タブ付きのdivを使用しているため(つまり、CSS display:noneを使用して一部のdivを非表示にしているため)、最初は表示されません。

したがって、ページが読み込まれると、すべての画像を読み込むのに時間がかかります。これは、ページが遅いように見えます(ブラウザの読み込みバーが10秒以上完了しないため)。

ページに表示されるまで画像を読み込まない方法が欲しいのですが。

私はjQueryLazyLoadで遊んだことがありますが、これはブラウザをスクロールしたときにのみ画像をロードするようです(タブ付きのdivでは機能しません)。

したがって、LazyLoadをこのように機能するように変更する方法はありますか、それともこれを行うためのより良い方法がありますか?

ありがとう!

4

6 に答える 6

0

以前はこれに気づいていませんでしたが、LazyLoadはイベントからのトリガーをサポートしています。

http://www.appelsiini.net/projects/lazyload

誰かが私がこれをどのように行ったかについての手を必要とするならば、私に知らせてください!

于 2010-11-03T09:21:28.593 に答える
0

たぶん、 jQuery Tabsは、タブに対するajax呼び出しを使用して、必要なことを実行できます...

非表示のdivをどのように表示しますか?

于 2010-09-15T13:13:02.827 に答える
0

攻撃の1つの計画:

画像のURLをimgタグのsrc属性に配置する代わりに、別の場所に配置し(たとえば、その上に特定のクラスがある非表示のスパン)、divを表示するときに、すべてのimgタグを繰り返し処理し、srcをURLに設定します持っていたはずです。

方法としては、確かにいくつかの欠点があります。

于 2010-09-15T13:21:14.693 に答える
0

私は最近それを試しましたが、これはjsではもう不可能であると言わざるを得ません。lazyloadのようなプロジェクトは、起動時にすべての画像の読み込みを停止することを常に宣言してきましたが、firebugでこれが機能しないことがわかります。画像は、domreadyとスクロールを開始したときに2回読み込まれます...

あなたの唯一の選択肢は、手元にあるajaxか、次のようなことをすることです。

<img src="transparent.gif" alt="" rel="real image source" />

次に、divが表示されたら属性を切り替えて、画像の読み込みを開始します。

少なくともグーグルでインデックスを作成する必要がない場合は、これでも問題なく機能します。

お役に立てば幸いです。:)

編集:うーん、私がちょうど答えを与えたときになぜ私は-1を得たのですか?lazyloadのあるページを見て、firebugを有効にしてから、ページをスクロールしてください。ここでstackoverflowとlazyloadプラグインのコメントで、これが現時点で唯一の解決策であるとさえ言われました... :(

于 2010-10-10T12:20:52.940 に答える
0

HTML5 doctypeを使用している(または使用できる)場合は、タグ属性に「data-」プレフィックスを使用できます。

<img src="" data-src="/path/to/image" style="display: none" />

次に、Javascriptを使用してsrcにdata-srcを入力できます。

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
于 2010-10-10T22:03:47.313 に答える
0

画像の数が多いために時間がかかるプログレスバーを「非表示」にすることが唯一の目標である場合は、プログレスバーが「使用されない」ため、何らかのAJAXソリューションを使用します。HTML要素をロードする方法(および場合によってはいつ)がより複雑になります。

私は個人的にHTML属性を本来の目的以外に使用するのは好きではないので、パスを別の属性に保存し、必要に応じて切り替えることは私の最初の選択肢ではありません。代わりに、JavaScript配列(id => path)を作成し、必要に応じて個別のHTMLIMG要素を更新しようとします。

幸運を!;)

于 2010-10-12T14:42:01.553 に答える