删除图像加载时间

Question

我最近在一些网站上看到了我认为的设计缺陷，但我不确定你会如何纠正它。该缺陷通常发生在拥有大量图像的网站上。例如，带有图库的网站。

设计缺陷是当您点击网页打开页面然后然后观看图像慢慢加载到屏幕上。我真的不喜欢它的外观，因为它看起来很便宜。但是，我不明白我将如何防止它发生。

如果有人能够向我解释问题背后的逻辑以及寻找/学习解决方案的正确方向，那将是很棒的。

Answer 1

只是一个例子，但是如果您想要隐藏页面直到它准备就绪，您可以添加一个覆盖页面的覆盖div：

.overlay {
  background: #000; 
  height:     100%; 
  width:      100%;
  z-index:    999;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

然后，整个页面加载后，用jQuery删除它：

$('document').load(function() {
    $('.overlay').remove();
});

编辑：或者你可以识别出你想要显示为服务器端进程的所有图像，然后找到平均颜色或其他东西，并将其作为每个img容器的备用背景返回。如果你不存储那些数据，那将会是服务器密集型的。它完全取决于你，它是一种设计选择。