頁面加載后通過javascript顯示圖像

Question

我正在嘗試創建最初隱藏的圖像-但一旦文檔完全通過JavaScript文件加載后，圖像便會顯示出來。

 $(document).ready(function () { document.getElementById("theImage").style.visibility = "visible"; });

 #theImage { visibility:hidden; }

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Kami Nelson Bio </title> <link href="boilerplate.css" rel="stylesheet" type="text/css"> <link href="KNelson-Styles.css" rel="stylesheet" type="text/css"> <script src="respond.min.js"></script> <script src="KNelson_reveal.js"></script> </head> <body> <div class="gridContainer clearfix"> <div id="theImage"> <img src="images/Kami-100.jpg" alt="Kami Nelson Image"/> </div> <div id="div1" class="fluid"> <h1>Bio for Kami Nelson</h1> <p>Text</p> </div> </div> </body> </html>

為什么這不起作用？

先感謝您。

Answer 1

您應該包括jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者使用本機window.onload()代替$(document).ready()

window.onload=function () {
    document.getElementById("theImage").style.visibility = "visible";
}

Answer 2

您缺少jQuery庫參考
您沒有正確使用選擇器選擇id theImage圖像。
theImage應該用於img標簽。

JavaScript的

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
    $("#theImage").css('display':'block');
});
</script>

CSS

#theImage {
    display: none;
}

HTML

<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>

Answer 3

為什么不只在窗口加載時繪制圖像？ 給您的圖片一個ID，在此示例中，我將使用“ image”。

<script>
window.onload = function () 
{
$('#image').css({"display":"block";});
}
</script>

頁面加載后通過javascript顯示圖像

問題描述

3 個解決方案

解決方案1
1 2015-03-27 23:17:07

解決方案2
0 已采納 2015-03-27 23:15:22

解決方案3
0 2015-03-27 23:17:31

頁面加載后通過javascript顯示圖像

問題描述

3 個解決方案

解決方案1 1 2015-03-27 23:17:07

解決方案2 0 已采納 2015-03-27 23:15:22

解決方案3 0 2015-03-27 23:17:31

解決方案1
1 2015-03-27 23:17:07

解決方案2
0 已采納 2015-03-27 23:15:22

解決方案3
0 2015-03-27 23:17:31