我正在寻找关于 niice.co 如何通过延迟加载加载图像的方法。
正如您在滚动时从他们的网站中看到的那样，在延迟加载图像之前，放置图像的 div 的背景实际上是图像的主色。
我环顾四周，发现了一些插件，例如 http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/但不知道他们如何将两者合并。
最佳答案
不会工作。加载时图像不可用。您可以在后台检查颜色。然后:将颜色保存在数据库中，并将十六进制输出为数据属性，并将其用作 JavaScript 中的背景或直接在元素样式中使用。或另一种解决方案:如果未保存颜色，请使用自适应背景库。然后:调用后端API并保存十六进制。在下一个请求中，您可以在 javascript 中或在元素样式中使用十六进制。
编辑: 感谢 Empiric 提供的操作方法链接:https://manu.ninja/dominant-colors-for-lazy-loading-images
另一个性能提示:不会一次加载所有图像。拆分请求是更好的用户体验。如果您有 8 个图像，每行 4 个，则加载前 4 个图像。如果它们已完成:加载第二行，依此类推。更重要的一件事是:如果您有小的配置文件图像等(例如 stackoverflow)，则在加载内容图像时不会加载此图像。访客关注点是最重要的点。
关于javascript - 延迟加载具有占位符主色的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36621994/