javascript - 加载大量图像而不卡顿的最佳方式。

我有一个网站，只有当图片略低于视点时我才加载图片。

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

当用户滚动时，图像就在视点下方，然后加载它们。

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

但是在移动网络上，当我滚动时，它会随着图像的加载而断断续续。

一旦所有内容加载完毕，网站就会顺畅地上下滚动。图像也会动态调整大小以最小化文件大小。

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

我只在网站加载后才加载它们，然后仅当它们刚好低于视点时才加载。

您认为我应该全部加载它们以避免卡顿，尤其是在移动设备上吗？

我在 google 上搜索了平滑的图像加载，但我不认为我在搜索正确的术语。

无论如何，我们将不胜感激。

谢谢。

最佳答案

这是一个简单轻量级的 JS 懒加载库。它简单易懂。

他们网站上有一个演练示例。

<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" />

关于javascript - 加载大量图像而不卡顿的最佳方式。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40143624/