html 给li的img增加onload 和 onerror
时间: 2024-02-24 19:59:27 浏览: 32
可以使用以下代码给 `li` 元素中的 `img` 元素添加 `onload` 和 `onerror` 事件:
```
<li>
<img
src="image.jpg"
onload="console.log('Image loaded successfully!')"
onerror="console.log('Error loading image!')"
>
</li>
```
在 `onload` 和 `onerror` 事件中,你可以执行任何你想要的 JavaScript 代码,例如向控制台输出日志信息。
相关问题
Image 对象的 onload 和 onerror 事件 如何释放旧图片的资源
释放旧图片资源的关键是确保在加载新图片之前释放旧图片。可以在 `Image` 对象的 `onload` 和 `onerror` 事件中实现这一点。
具体方法如下:
1. 在 `Image` 对象的 `onload` 事件中,先检查是否已经存在旧图片,如果存在则释放旧图片的资源,然后再将新图片设置为 `src` 值。
```javascript
var img = new Image();
var oldImg = null;
img.onload = function() {
if (oldImg) {
URL.revokeObjectURL(oldImg.src);
}
oldImg = img;
// do something with the new image
};
img.src = 'new-image.jpg';
```
2. 在 `Image` 对象的 `onerror` 事件中,也需要进行类似的操作,确保在加载新图片失败时释放旧图片的资源。
```javascript
var img = new Image();
var oldImg = null;
img.onerror = function() {
if (oldImg) {
URL.revokeObjectURL(oldImg.src);
}
// do something when the new image fails to load
};
img.src = 'new-image.jpg';
```
这样做可以确保在加载新图片之前释放旧图片的资源,有效地减少内存占用和提高性能。
xhr.onload, xhr.onerror 以及xhr.onreadystatechange的区别
`xhr.onload` 和 `xhr.onerror` 是 `XMLHttpRequest` 对象的两个事件处理程序,分别在 Ajax 请求成功和失败时触发。
- `xhr.onload`:当 Ajax 请求成功时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4,而且 `status` 属性值在 200 到 299 之间。
- `xhr.onerror`:当 Ajax 请求失败时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4,但 `status` 属性值不在 200 到 299 之间。
`xhr.onreadystatechange` 是 `XMLHttpRequest` 对象的另一个事件处理程序,它在 Ajax 请求状态改变时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值发生变化时(从 0 到 4 ),每次状态变化都会触发一次该事件。
通常,我们在 `xhr.onreadystatechange` 事件处理程序中判断 `readyState` 和 `status` 属性值来确定 Ajax 请求是否成功。但是,由于 `xhr.onreadystatechange` 事件会触发多次,因此我们需要在事件处理程序中使用条件语句来判断 Ajax 请求的状态,而 `xhr.onload` 和 `xhr.onerror` 事件只会触发一次,因此使用它们更加方便。
相关推荐
![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)