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

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