具有占位符主色的延迟加载图像

Question

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

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

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

Answer 1

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

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

另一个性能提示：不会一次加载所有图像。拆分请求是更好的用户体验。如果您有 8 张图片，每行 4 张，请加载前 4 张图片。如果它们已完成：加载第二行，依此类推。更重要的一件事：如果您有小的配置文件图像等（如 stackoverflow），则在加载内容图像时不会加载此图像。访问者的焦点是最重要的一点。