2

我有一个小问题。如何为正确的延迟加载剪切背景图像。

我有 1920px 宽度和 5100px 高度的 img 。现在我在想，如何剪切图像以快速正确加载以及如何编写它。

我的想法是好是坏？

我将我的背景图像剪切为大约 500 像素高度的条纹，我将使用 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

另一种解决方案是使用渐进格式将图像保存为 jpg，并使用 Adob​​e Photoshop 进行 4 到 5 次扫描。

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

第一层加载速度非常快。所以没有必要对图像进行切片。

于 2012-11-17T16:48:04.790 回答