2

少し質問があります。正しく遅延ロードするために背景画像をカットする方法。

幅1920px、高さ5100pxのimgがあります。今、私は、高速で正確なロードのためにイメージをカットする方法と、それを書き込む方法を考えています。

その私の考えは良いか悪いですか？

高さ約 500px のストライプの背景画像を切り取り、stripe1.png、stripe2.png などで div を作成し、しきい値を指定して読み込みます。

例えば：

<div id="stripe1">background img stripe 1, set in CSS</div>
<div id="stripe2">background img stripe 2, set in CSS</div>
<div id="stripe3">background img stripe 3, set in CSS</div>

CSSで私は持っています

#stripe1{
    background-image: url(`image1.png`);
}
#stripe2{
    background-image: url(`image2.png`);
}

など..と私のjQuery

$("div.stripe1").lazyload();
$("div.stripe2").lazyload({ threshold : 200 });
$("div.stripe3").lazyload({ threshold : 200 });

私の考えは正しいですか？

あなたの答えをありがとう、そして私の英語でごめんなさい

4

1 に答える 1

1

別の解決策は、Adobe Photoshop を使用して 4 ～ 5 回のスキャンでプログレッシブ形式を使用して画像を jpg として保存することです。

次に、この大きな画像がレイヤーのように読み込まれます。最初のレイヤーは見栄えが悪く、2 番目のレイヤーは前のレイヤーを改善します。

最初のレイヤーは非常に高速にロードされます。したがって、画像をスライスする必要はありません。

于 2012-11-17T16:48:04.790 に答える