懒散地加载以占位符为主色的图像

Lazy loading images with placeholder dominant colour

本文关键字：图像占位符加载更新时间：2024-07-01

我想对niice.co如何通过延迟加载加载他们的图像做点什么。

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

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

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

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

还有一个性能提示：不会一次加载所有图像。拆分请求是更好的用户体验。如果您有8个图像，每行4个，请加载前4个图像。如果它们被清除：加载第二行等等。更重要的是：如果你有小的个人资料图像等（比如stackoverflow），在加载内容图像时不要加载这些图像。游客关注点是最重要的一点。