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

Question

我有一个客户要求暂时隐藏网页上的所有图像，但没有创建 404（让它们对机器人可见）。

我的尝试是这样的：

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

问题是，在慢速连接上，图像正在加载，并且只有在$(document).ready()隐藏（当然 - 这是我在代码中提出的问题 :-) - 我不知道不同的方法......）

如何使所有图像在加载时以渐进方式在浏览器端“隐藏”？

score 3 · Accepted Answer

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

img {
     visibility: hidden;
}

这样所有图像都正确链接，您的内容流是完整的（与 using 相反display: none;），您不需要任何 JavaScript 并且用户不会看到它们。

演示

score 1 · Accepted Answer

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

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

和

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

您将加载事件分配给图像完成加载时触发的图像，但使用 css 将背景图像分配给所有图像会更容易。请注意，这不适用于透明图像。

2 回答 2