延迟加载占位符主导颜色的图像

Question

我正在寻找一些关于niice.co如何通过延迟加载来加载图像的方法。

正如您在滚动时从他们的网站上看到的，在延迟加载图像之前，放置图像的div的背景实际上是图像的主色。

我环顾四周，找到了一些插件，例如http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/，但不知道他们是如何合并两者的。

Answer 1

不行。加载时图像不可用。您可以检查后端的颜色。然后：将颜色保存在数据库中并输出十六进制作为数据属性，并将其用作javascript中的背景或直接在元素样式中。或另一种解决方案：如果未保存颜色，请使用自适应背景库。然后：调用后端API并保存Hex。在下一个请求中，您可以使用带有javascript或元素样式的十六进制。

编辑： 感谢HowTo链接的经验：https://manu.ninja/dominant-colors-for-lazy-loading-images

另一个性能提示：一次不加载所有图像。拆分请求是一个更好的用户体验。如果您有8个图像，每行4个图像，则加载前4个图像。如果它们是finshed：加载第二行，依此类推。另一个重要的事情：如果您有小的profil图像等（如stackoverflow）在加载内容图像时不加载此图像。访客关注点是最重要的一点。