极客教程如何使用HTML在点击时显示图像
偶尔，网页可能包含与该网页内容不相关的图像。这些不寻常的图像在网页加载时被加载，这就增加了加载时间。网页上更多的加载时间会减少访问者的数量。
在这篇文章中，我们想出了一个解决这个问题的办法。我们将学习如何使用HTML、CSS和JavaScript在用户点击图片时才显示图片。
使用JavaScript更改<img>属性的显示属性:在这个方法中，我们将使用style属性在<img>标签内设置display属性。我们必须为图像设置“display: none”。之后，当用户单击按钮时，我们将调用一个JavaScript函数，该函数将访问图像，将其display属性更改为block。
步骤:
- 在HTML代码中创建
<img>元素。 - 为
<img>元素添加样式，并将display属性设置为无。 - 创建一个JavaScript “show()”函数，可以访问图片并将display属性改为block。
- 在HTML代码中添加按钮，当用户点击它时调用 “show() “函数。
示例:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set display to none for image*/
#image {
display: none;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>Click on the button to see image</h3>
<!-- Add id to image -->
<img id="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image" />
</div>
<button type="button"
onclick="show()" id="btnID">
Show Image
</button>
<script>
function show() {
/* Access image by id and change
the display property to block*/
document.getElementById('image')
.style.display = "block";
document.getElementById('btnID')
.style.display = "none";
}
</script>
</body>
</html>
输出:
使用 <img>标签的空src性：显然，如果有一个空的src值，用户将无法看到网页上的图片。我们将使用JavaScript函数来设置src属性的值，这是在用户点击按钮时实现的。然而，一些浏览器，如Chrome，在使用这种方法时，并没有删除破碎的图像图标。
步骤:
- 创建
<img>元素，其src属性为空。 - 在JavaScript中创建 “show() “函数，它可以获得图像并将图像源链接添加到src属性中。
- 添加HTML按钮，当用户点击它时，调用 “show() “函数。
示例:
<!DOCTYPE html>
<html>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>Click on the button to see image</h3>
<!-- img element without src attribute -->
<img id="image" src="" />
</div>
<button type="button"
onclick="show()" id="btnID">
Show Image
</button>
<script>
function show() {
/* Get image and change value
of src attribute */
let image = document.getElementById("image");
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
document.getElementById("btnID")
.style.display = "none";
}
</script>
</body>
</html>
输出:
使用Bootstrap模态：我们将使用一个Bootstrap模态，在点击按钮的同时显示一张图片。我们需要将bootstrap CDN与HTML代码结合起来使用。我们可以将bootstrap CDN添加到我们的HTML文件中，就像下面的示例代码中添加的那样。
步骤:
- 在HTML文件中添加bootstrap CDN。
- 创建Bootstrap模态，并在模态的主体中添加一个图片。
- 创建一个HTML按钮来触发一个模态。
示例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<h2>GeeksforGeeks</h2>
<p><b>Click on the button to see image</b></p>
<!-- Button to launch a modal -->
<button type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Show image
</button>
<!-- Modal -->
<div class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Add image inside the body of modal -->
<div class="modal-body">
<img id="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="Click on button" />
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Adding scripts to use bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
输出:
