Image 对象的 onload 和 onerror 事件 如何释放旧图片的资源
时间: 2024-02-21 09:01:53 浏览: 20
释放旧图片资源的关键是确保在加载新图片之前释放旧图片。可以在 `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';
```
这样做可以确保在加载新图片之前释放旧图片的资源,有效地减少内存占用和提高性能。