页面加载后通过javascript显示图像

Show image via javascript after page load

本文关键字：javascript 显示 显示图 图像 加载      更新时间：2023-09-26

我正在尝试创建一个图像，该图像最初是隐藏的，但一旦文档通过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>

为什么不起作用？

提前谢谢。

您应该包含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";
}
  • 您缺少jQuery库引用
  • 你不合适使用选择器选择id为CCD_ 3的图像
  • 假设CCD_ 4用于CCD_ 5标签

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"/>

为什么不在加载窗口时直接绘制图像？给你的图片一个id，在这个例子中我会用"image"。

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