逐步更改页面上的所有图像

Question

我有一位客户要求暂时隐藏网页上的所有图片，但没有创建404（让机器人看到它们）。

我的尝试是这样的：

jQuery(document).ready(function() {
    jQuery("img").attr({src: "/my/path/myfile.png"});
});

问题是，在连接速度慢的情况下，图像正在加载，只有$(document).ready()才隐藏（当然 - 这就是我在代码中提出的问题:-) - 我不知道另一种方法...... ）

我是如何制作的，以便在逐步加载的同时，在浏览器端“隐藏”所有图像？

Answer 1

为什么不用CSS简单地隐藏它们：

img {
     visibility: hidden;
}

这样所有图片都能正确链接，您的内容流完好无损（与使用display: none;相反），您不需要任何JavaScript，用户也不会看到它们。

<强>演示

Try before buy

Answer 2

我知道有两种方法可以做到这一点。

img {
  background: url('loading.gif') no-repeat;
}

和

<script>
$('#loadImg').show();
$('#BaseImage').load(function(){$('#loadImg').hide();});
</script>

您可以将图像加载事件分配给图像，该图像在图像加载完成后会触发，但使用css对所有图像的背景图像将更容易。请注意，对于透明图像，这不能很好地工作。