2

私はこのようなものを持っています:

<div>
    <img src="bigimage_1.jpg" />
    <img src="bigimage_2.jpg" />
    <img src="bigimage_3.jpg" />
    ...
    <img src="bigimage_n.jpg" />
</div>

ビューポートの幅が 300px より大きい場合にのみ、div を表示する必要があります。

画像が非常に大きいため、幅が 300px 未満の場合はダウンロードしたくありません。しかし、幅が 300px を超える場合は、できるだけ早くダウンロードを開始する必要があります。

また、これは多くのデバイスの多くのブラウザーで動作するはずなので、できるだけ堅牢にしたいと考えています。

https://github.com/sebarmeli/JAILを使用して $(document).ready で jail 関数を呼び出すことを考えていましたが、より良い解決策があるかどうかはわかりません。
推奨事項はありますか？

4

3 に答える 3

2

Scott Jehl の picturefillソリューションをご覧になることをお勧めします。noscript タグを使用してフォールバック画像を提供する no-js ソリューションを実装するという点で、JAIL と多少似たアプローチをとりますが、プレースホルダー .gif に対して行われる最初の http 要求を回避します。

于 2012-11-29T20:37:11.783 に答える
0

CSS @media (最小幅: 300px) { … } を使用してみてください。

于 2012-11-29T20:05:45.527 に答える
0

関数を配置し、ビューポート (または、ボディや他の要素のマージン、パディングなどを考慮して、画像に使用できるレンダリング領域) の幅を条件付きステートメントでテストし、合格した場合はjail$(document).ready関数を呼び出します。

画像が読み込まれるはずの場所に width-greedy-zero height (css を使用) の空の要素を配置し、jquery を介して要素を選択してどのくらいの幅を取得できるかをテストできます。幅が 300 を超える場合は、JAIL を呼び出します。

于 2012-11-29T20:14:19.347 に答える