js 监听事件 在img标签打开照片
时间: 2024-06-13 13:00:40 浏览: 8
在JavaScript中,我们可以使用`addEventListener`方法来监听img标签的`load`事件。当图片加载完成时,这个事件会被触发。以下是一个简单的示例:
1. 首先,创建一个HTML文件,包含一个img标签和一个用于显示图片的元素:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Load Example</title>
</head>
<body>
<img id="myImage" src="your-image-url.jpg" alt="An example image">
<div id="displayImage"></div>
<script src="script.js"></script>
</body>
</html>
```
2. 接下来,创建一个名为`script.js`的JavaScript文件,并编写以下代码:
```javascript
// 获取img标签和显示图片的元素
const img = document.getElementById('myImage');
const displayImage = document.getElementById('displayImage');
// 为img标签添加load事件监听器
img.addEventListener('load', function() {
// 当图片加载完成时,将图片的src设置为显示图片元素的src,从而显示图片
displayImage.src = img.src;
});
```
这样,当img标签中的照片加载完成后,它会自动显示在`displayImage`元素中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)