js中当页面加载出来的同时加载出显示
时间: 2023-08-05 19:04:07 浏览: 56
您可以使用JavaScript来实现页面加载时显示一个元素。可以在HTML中添加一个元素(例如div),然后在CSS中设置其样式为“display:none”,这将隐藏该元素。
然后,在JavaScript中,您可以使用window.onload事件来监听页面加载完成后的事件,并在其中设置该元素的样式为“display:block”,这将显示该元素。
例如,以下是一个使用纯JavaScript实现的示例:
HTML代码:
```
<div id="loading" style="display: none;">Loading...</div>
```
CSS代码:
```
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
```
JavaScript代码:
```
window.onload = function() {
document.getElementById("loading").style.display = "block";
};
```
这样,在页面加载完成后,将显示一个带有文本“Loading...”的元素。
相关问题
h5中页面加载出来就隐藏图片
您可以使用CSS的display属性来实现该效果。具体做法是,在图片所在的标签中添加一个样式,设置display为none,如下所示:
```html
<img src="your-image.jpg" style="display:none;">
```
这样,当页面加载完成后,该图片就会被隐藏起来。如果需要在某个事件触发时显示该图片,可以使用JavaScript来修改该标签的display属性,将其设置为"block"或其他合适的值。例如:
```javascript
document.querySelector('img').style.display = 'block';
```
这样,该图片就会在事件触发时显示出来。
javascript 在js文件中加载js
是可以的。在js文件中加载其他js文件的方式有两种:
1. 使用`<script>`标签动态插入js文件。
```javascript
var script = document.createElement('script');
script.src = 'path/to/your/js/file.js';
document.getElementsByTagName('head')[0].appendChild(script);
```
2. 使用XMLHttpRequest对象加载js文件内容并执行。
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/your/js/file.js', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
eval(xhr.responseText);
}
};
xhr.send(null);
```
不过需要注意的是,动态加载的js文件可能会影响网页性能和加载速度,需要慎重考虑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)