Question

我有一个网站，我只在这些图像略低于视点时加载图像。

这样，网站首先加载没有图像，然后根据视点确定需要加载哪些图像。

当用户滚动，图像位于视点下方时，它会加载它们。

它在桌面上运行良好。没有迟钝，没有口吃。

然而，在移动网络上，当我滚动时，它会在图像加载时断断续续。

加载完所有内容后，网站会顺畅地上下滚动。此外，还可以动态调整图像大小以缩小文件大小。

我的问题是，加载大量图像的最佳方法是什么？

我只在加载网站后加载它们，然后才将它们放在视点下方。

你认为我应该加载它们以避免特别是在移动设备上的口吃吗？

我谷歌顺利加载图像，但我不认为我正在搜索正确的术语。

无论如何，建议将不胜感激。

谢谢。

Answer 1

这是一个简单轻量级的JS lazy loader库。它直截了当，易于理解。

他们的网站上有一个例子。

<script src="blazy.js"></script>
<script>
    (function() {
        // Initialize
        var bLazy = new Blazy();
    })();
</script>

然后在您的HTML中，您可以像这样设置图像。为其指定b-lazy类和指向图像的data-src属性。

<img class="b-lazy" data-src="image.jpg" />