javascript - 消除图像加载时间

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();
});

<小时/>

编辑:或者，您可以识别要显示为服务器端进程的所有图像，然后找到平均颜色或其他内容，并将其返回作为每个图像容器的备用背景。如果您不存储这些数据，这将是相当服务器密集型的。这实际上完全取决于您，这是一种设计选择。