私はページに1000個の非常に小さな画像を表示しようとしています。パフォーマンス面では、1000枚の画像を1ページに表示する最も良い方法は何ですか？
これらを一度に読み込むと、パフォーマンスが明らかに1000画像を大幅にレンダリングすることになります。
スクロール時にイメージsrcを適用する実装を試みました（250pxスクロール、25イメージ読み込みなどの多数の量で）、次にイメージをタイマーにロードしようとしました。
これらのメソッドはパフォーマンスを向上させるのに役立ちましたが、これを行う最も効率的な方法は何ですか？彼らはまだラグの刺激量を持っているようでした - 私は多くの画像を1ページにレンダリングすることに根本的な問題があることを理解していますが、より良い解決策がありますか？
EDIT：もちろん
ページネーションは助けるが、ここではオプションではありませんでしょう。また、画像はAPIから取り出されるため、1つの大きな画像/スプライトを使うのは便利ではありません。
スプライト/ページネーションは、このような状況ではオプションではありませんでしたので、私は、次の最善の解決策が見つかりました：
は、いくつかの微調整と、方法「スクロールの負荷・イメージ」を適応とcruicallyそれぞれの親要素を設定します画像（したがって、画像がある1000個の要素がある）はdisplay:noneになります。
親要素も最初の25 display:blockを行うdisplay:none &にデフォルト設定で：
するvar scrollPos = 0。 var endEle = 0;
$（ウィンドウ）。スクロール（関数（）{
scrollPos = $(window).scrollTop();
if ($(window).scrollTop() < scrollPos + 250) {
//load 15 images.
$('.myDiv img').slice(endEle,endEle+50).each(function(obj){
var self = $(this);
var url = self.attr("role");
self.attr("src", url);
self.parent().css("display","block");
});
endEle = endEle + 50;
}
}）;
これはdisplay:blockの次の50個の要素を設定し、<src>に<img role>を切り替えるたびにユーザがスクロール250ピクセルを（ページがレンダリングされるときに画像URLがroleに入れました）。
すべての画像が一意のファイルである場合、それらを取得するために複数の接続を作成することから大きな打撃を受けています。あなたは、すべてのアイテムの1つの "マスター"イメージを作成し、次にそれぞれ異なるクラスまたはIDを持つ1000個のdivを作成してから、CSSのバックグラウンドオフセットを定義することができます。このメソッドは、しばしばCSSスプライトと呼ばれます。
あなたはAJAXのページネーションを作ることができませんでした、そのdynamiclyは、ページ番号に基づいて画像をロードしますか？たとえば、1ページに25画像。最初のページをリクエストすると、次のページを動的にロードするなどの処理を行います。そうすれば、ユーザーは遅延に気付かないでしょう。それだけでパフォーマンスをさらに向上させることができます！
はここで別の角度からの答えです：
あなたはサーバー側で画像を合成し、おそらくラインでそれらをレンダリングしてもらえますか？ これはおそらく特定の状況でのみ機能します。
まあ、私は最良の解決策は、ユーザーに見えるようにレンダリングすることだと思います。すなわちあなたのスクロールアプローチ。これは、ユーザーが見ただけで多くの画像をロードすることを意味し、すべてを一度にロードするわけではありません。あなたが言うように、それはあなたのコントロールから外れています。ページを使用するのは問題になりませんか？それは全体的によりよいアプローチになります。
多くの画像は、大量の帯域幅とおそらくメモリを使用するため、ラグが多く発生する原因になります。
CSSスプライトがあなたに多少役立つでしょうか？ – Piskvor
[ユーザーがスクロールして画像を読み込むための遅延ロード・プラグインの複製は可能ですか？]（http://stackoverflow.com/questions/4618343/lazy-load-plugin-to-load-images-as-user-scrolls） – home