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

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

我的尝试是：

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

问题是，在慢速连接上，图像正在加载，并且仅在

$（document）.ready（）

上隐藏（当然-这是我在代码中要求的：-）-我不知道其他方法…）

---

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

为什么不使用CSS将它们隐藏起来：

img {
     visibility: hidden;
}

这样，所有图像都可以正确链接，内容流保持完整（与使用

display:none；

）相反），您不需要任何JavaScript，用户也不会看到它们

演示

---

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

img {
     visibility: hidden;
}

这样，所有图像都可以正确链接，内容流保持完整（与使用

display:none；

）相反），您不需要任何JavaScript，用户也不会看到它们

演示

---

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

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

及

$（'#loadImg'）.show（）；
$（'BaseImage'）.load（函数（）{$（'loadImg'）.hide（）；}）；

---

您可以将加载事件指定给图像，当图像加载完成时触发该事件，但使用css将背景图像分配给所有图像会更容易。请注意，这对透明图像不太有效。

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

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

及

$（'#loadImg'）.show（）；
$（'BaseImage'）.load（函数（）{$（'loadImg'）.hide（）；}）；

---

您可以将加载事件指定给图像，当图像加载完成时触发该事件，但使用css将背景图像分配给所有图像会更容易。请注意，这对透明图像不太管用。

因此，您真正想做的是在加载图像时显示占位符图像？@Blender-实际上对我来说也是如此。我使用的代码指向一个不存在的路径。。。但实际上我需要隐藏。@Blender-（编辑注释后）-不。我希望客户端浏览器看不到这些图像，甚至一秒钟也看不到，同时也不会为机器人生成404。那么，“加载时，以渐进的方式”会做什么呢部分是什么意思？请注意，如果你对机器人和实际用户有不同的内容，如果他们发现了，你可能会被搜索引擎踢出。所以你真正想做的是在加载图像时显示占位符图像？@Blender-这对我来说实际上是一样的。我使用的代码指向一个不存在的路径。。。但实际上我需要隐藏。@Blender-（编辑注释后）-不。我希望客户端浏览器看不到这些图像，甚至一秒钟也看不到，同时也不会为机器人生成404。那么，“加载时，以渐进的方式”会做什么呢部分是什么意思？请注意，如果你的机器人和实际用户有不同的内容，如果他们发现了，你可能会被踢出搜索引擎。为什么？？因为我太累了，自己都想不起来了！！：-）但它不会也会造成布局问题吗？@ObmerkKronen看到了。使用此CSS规则，您的内容流仍然与以前相同。谢谢。我想用大炮射苍蝇。但我想我会结合使用这两种方法。有些客户有奇怪的请求。我想知道为什么人们会投票否决这一点。。这是因为这里是机器人的拥护者吗？：-）使用jQuery当然可以做到：.；）但您将再次看到已加载图像的闪光。@ObmerkKronen如果您将所有内容都放在屏幕上，则可以删除

.ready（）

-函数。如果您想在每个元素之后立即执行此操作，则必须在每个

-tag之后放置一个短脚本。为什么？？因为我太累了，自己都想不起来了！！：-）但它不会也会造成布局问题吗？@ObmerkKronen看到了。使用此CSS规则，您的内容流仍然与以前相同。谢谢。我想用大炮射苍蝇。但我想我会结合使用这两种方法。有些客户有奇怪的请求。我想知道为什么人们会投票否决这一点。。这是因为这里是机器人的拥护者吗？：-）使用jQuery当然可以做到：.；）但您将再次看到已加载图像的闪光。@ObmerkKronen如果您将所有内容都放在屏幕上，则可以删除
.ready（）
-函数。如果您想在每个元素后立即执行此操作，则必须在每个
-标记后放置一个短脚本。