你可以帮我写一个 加载 的js代码吗
时间: 2023-02-23 07:09:49 浏览: 50
当然可以!这是一个简单的加载代码的例子:
```
// 加载图片的函数
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
// 使用示例
loadImage('example.jpg')
.then((img) => {
// 加载成功
document.body.appendChild(img);
})
.catch((error) => {
// 加载失败
console.error('图片加载失败:', error);
});
```
这个代码通过使用 `Promise` 对象来加载图片,并在加载成功或失败时执行相应的回调函数。如果需要加载其他内容,可以改变 `loadImage` 函数来实现。
相关问题
帮我写一个加载本地图片的前端代码
以下是一个使用HTML和JavaScript加载本地图片的示例代码:
HTML:
```html
<input type="file" id="fileInput">
<br>
<img id="imagePreview" src="" alt="Image Preview">
```
JavaScript:
```javascript
const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener('load', function() {
imagePreview.src = reader.result;
});
reader.readAsDataURL(file);
}
});
```
这里使用了一个文件输入框`<input type="file">`,当用户选择了本地图片后,通过JavaScript的`FileReader`读取图片文件内容,并以Base64编码的形式设置到`<img>`标签的`src`属性中,最终展示在页面上。
帮我写一个uniapp 自定义加载动画代码
好的,以下是一个uniapp自定义加载动画的示例代码,你可以参考:
在你的vue文件中,添加以下代码:
```html
<template>
<div class="loading-container" v-show="showLoading">
<div class="loading-spinner"></div>
</div>
</template>
```
然后在你的css文件中添加以下代码:
```css
.loading-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.loading-spinner {
height: 40px;
width: 40px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
animation: rotation 1s infinite linear;
-webkit-animation: rotation 1s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
```
最后在你的js文件中添加以下代码:
```js
export default {
data() {
return {
showLoading: false
}
},
methods: {
showLoading() {
this.showLoading = true
},
hideLoading() {
this.showLoading = false
}
}
}
```
当你调用`showLoading`方法时,loading动画就会显示出来,调用`hideLoading`方法时,loading动画就会隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)