没有打开Javascript时。还有什么解决方案

Question

我正在网站上工作。我在CSS中设置了display: none的图像。我使用JavaScript来显示它并在页面加载完成后将其滑入。它工作得很好。

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

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

Answer 1

您可以检测是否启用了JS（像Modernizr一样会想到一些事情，或者简单的<noscript>标记可能会解决这个问题...然后添加一些额外的CSS来再次显示它。这只是一个快速而肮脏的答案，但应该可以解决这个问题：

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

Answer 2

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

这将：

• 如果JS被禁用则显示图像，而不是因为JS被禁用而隐藏图像
• 如果禁用JS，则隐藏图像，其他图像将显示在您的其他JS脚本中。

Answer 3

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

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