タイトルは少し誤解を招く可能性がありますが、より適切なタイトルが見つかりませんでした.
私は Web サイトで集中的に画像を処理していますが、50 を超える画像を読み込むと、処理速度が大幅に低下します。Lazyload を使用して、まだビュー ポートにない画像の読み込みを遅らせたかったのですが、レイアウトがこれを可能にしません。
画像を並べて配置してい<div id="container"><img ..><img ..><img ..></div>ます。CSS を使用して、それらを別々の列に整理しています。(正確に言うと、画像も div に含まれています。<div class="pin"><img ..></div>
これが私のCSSです。
#container {
width:100%;
padding:2px 2px 2px 2px;
column-count:7;
-webkit-column-count:7;
-moz-column-count:7;
-ms-column-count:7;
-o-column-count:7;
column-gap:2px;
-webkit-column-gap:2px;
-moz-column-gap:2px;
-ms-column-gap:2px;
-o-column-gap:2px;
column-fill:balance;
-webkit-column-fill:balance;
-moz-column-fill:balance;
-ms-column-fill:balance;
-o-column-fill:balance;
}
.pin {
display:block;
width:100%;
column-break-inside:avoid;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-ms-column-break-inside:avoid;
-o-column-break-inside:avoid;
}
私の問題は、このように左上のピンがコンテナ内の最初のピンであり、次のピンがその隣ではなくその下にあることです。そのため、Lazyload スクリプトは最初のピンを最初にロードし、次にその下のピンをロードしますが、2 番目の列の最初のピンはロードされません.. コンテナの一番下までスクロールするまで、最初の列にロードしてから、2 列目にピンのロードを開始します。Lazylaod には特定のコンテナーに物をロードするオプションがありますが、コンテナー内に 100 個のピンを配置したい場合 (そこから多くはビュー ポートの外に出ます)、Lazylaod はそれらを同時にロードします。 ... このオプションは、より小さなコンテナー用に設計されました。
私の質問は: (最初) CSS でピンを整理して、2 番目のピンが最初の列の最初の下になく、2 番目の列の一番上になるようにする方法はありますか? そうでない場合、このジレンマを解決する方法について誰か提案がありますか?
(主に、私は最初に概念的なアイデアに興味があり、すぐに使用できる他のグリッド スクリプトには興味がありません。別のスクリプトを使用する方法が他にない場合に限ります。その場合、やり直すことがたくさんあるためです..)
ありがとう！