如何剪切正確延遲加載的背景圖像？

Question

我有一個小問題。如何剪切正確延遲加載的背景圖片。

我有img，它有1920px寬和5100px高。現在我正在思考，如何剪切圖像以便快速正確加載以及如何寫入圖像。

其我的想法好還是不好？

我剪下了我的背景圖像的條紋，它有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 }); 

它`我的想法是否正確？

謝謝您的回答和對不起我的英語

Answer 1

的另一個解決辦法是採用逐行格式的圖像爲JPG保存與使用Adobe Photoshop 4〜5次掃描。

然後這個大圖像將像層一樣加載。第一層看起來不太好，第二層會改善以前。

第一層將加載得非常快。所以不需要分割圖像。