css - 当没有打开 Javascript 时。还有什么解决办法？

Question

我正在做一个网站。我有一个我display: none在 CSS 中设置的图像。我使用 JavaScript 显示它并在页面完成加载后将其滑入。它运行良好。

我想在禁用 JS 的情况下启动该网站，看看会发生什么。我重新加载了网页，图像根本没有显示。这是正常的，因为它已display: none在 CSS 中设置。

这是我的问题：解决方案是什么？我想要一种情况，即使在浏览器中禁用 JS，用户仍会看到图像。此时我不希望图像滑入，但我希望它像网页上的任何其他内容一样加载和显示。

Answer 1

您可以检测 JS 是否已启用（例如Modernizr之类的一些事情，或者简单<noscript>的标签可能会起作用......然后添加一些额外的 CSS 以再次显示它。这只是一个快速而肮脏的答案，但它应该做诀窍：

<noscript>
    <style type="text/css">
        #yourimage { display: block; }
    </style>
</noscript>

Answer 2

默认情况下，您可以使用 js 显示图像display:block;并立即将其隐藏。不要为此使用任何库，并将 js 放在img代码中的 -tag 之后，这样您就不会有任何延迟。

这将：

• 禁用 JS 时显示图像，禁用 JS 后不隐藏图像
• 如果 JS 被禁用，则隐藏图像，您的其他图像将与您的其他 JS 脚本一起显示。

Answer 3

您应该需要使用<img>标签来显示所有图像，并且不要使用标签，display: none 以便在禁用 JS 时可以在浏览器中呈现。

您的 JS 应该用于控制复杂的效果，例如滑动或隐藏图像。