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次扫描。

然后这个大图像将像图层一样加载。第一层不会好看，第二层会改善以前。

第一层将非常快速地加载。因此无需对图像进行切片。

如何剪切正确延迟加载的背景图像？

1 个答案: