在延迟加载图像时避免过大的DOM大小

Question

我有一个dom大小的问题(3,044个元素)。我有一个滑块(光滑滑块)和图像使用它导致DOM大小的问题。Img标签有延迟加载，它先加载背景图像，然后加载主图像数据。

DOM大小参考如下图:

<img src="/assets/img/img_bg_md.png" data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp" alt="Title" class="lazyload img-responsive img-post" width="1" height="1">

有办法解决这个问题吗?

Answer 1

我不确定我明白你想要什么，但我会尽力帮助你的。您可以将已经固定的图像大小设置为您已经知道的图像大小。所以你可以放一个图片的背景图片让它加载的更漂亮

<style>
.img-responsive {
background-color: #ccc;
}
</style>
<img 
src="/assets/img/img_bg_md.png" 
data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp"
alt="Title" 
class="lazyload img-responsive img-post"
style="width: 1px;height: 1px"
/ >

<script>
const imagens = document.querySelectorAll('.img-responsive');
var src, resp;
for (const imagem of imagens) {
src = imagem.getAttribute("data-src");
resp = src.match(/image_(d+)x(d+)_/);
if(const && resp.length > 2){
imagem.style.width = resp[1] + 'px';
imagem.style.height = resp[2] + 'px';
}
imagem.onload = function() {
imagem.parentElement.style.backgroundColor = 'transparent';
imagem.style.width = imagem.naturalWidth + 'px';
imagem.style.height = imagem.naturalHeight + 'px';
}
}
</script>

其他建议:

在对图像使用延迟加载时，您可以尝试以下方法来减小DOM大小:

• 使用主图像的浅色版本作为背景图像。这可以帮助减小DOM元素的大小，还可以提高页面的加载速度。

• 使用占位符图像作为背景图像。这可以帮助减小DOM元素的大小，还可以提高页面的加载速度。

• 使用较小的图像作为背景图像。这可以帮助减小DOM元素的大小，还可以提高页面的加载速度。

• 使用响应式图像。通过使用srcset属性，您可以为不同的屏幕尺寸指定相同图像的不同大小，这可以帮助减少DOM元素的大小，还可以提高页面的加载速度。

• 使用图像优化工具。有几个可用的工具可以帮助您优化图像，这些工具可以减少DOM元素的大小并提高页面的加载速度。

• 使用CDN (content delivery network)。通过使用CDN，您可以将图像的交付卸载到世界各地的服务器网络，这可以帮助减少DOM元素的大小并提高页面的加载速度。

值得注意的是，这个问题没有放之四海而皆准的解决方案，您可能需要尝试这些方法的组合，以找到适合您特定用例的最佳解决方案。