img onload 作用
时间: 2023-07-27 16:18:03 浏览: 54
`onload` 是一个 HTML 图片元素(`<img>`)的事件属性。当图片加载完成时,该事件会被触发。可以使用 `onload` 属性来指定一个 JavaScript 函数,以便在图片加载完成后执行一些操作,例如修改图片的样式,或者显示一个消息。
例如,以下代码会在图片加载完成后,将图片的宽度修改为 200 像素:
```html
<img src="example.jpg" onload="this.width=200;">
```
需要注意的是,如果图片已经被浏览器缓存过,那么 `onload` 事件可能不会被触发。因此,如果需要确保在加载完成后执行某些操作,可以使用 JavaScript 来创建一个新的图片对象,然后将其 `src` 属性设置为所需的图片 URL。在这种情况下,可以使用 `onload` 事件来确保新图片已经加载完成。
相关问题
html 给li的img增加onload 和 onerror
可以使用以下代码给 `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 代码,例如向控制台输出日志信息。
js 上传file图片,压缩图片,导出file img.onload未执行
如果您上传的图片太大,可能会导致 `img.onload` 事件无法及时触发。这种情况下,您可以使用 `FileReader` API 将图像转换为数据 URL,然后使用 canvas 将其压缩为所需大小。以下是一个示例代码:
```javascript
function compressImage(file, maxWidth, maxHeight) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
const img = new Image();
img.src = reader.result;
img.onload = function() {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(blob => {
resolve(new File([blob], file.name, { type: file.type }));
}, file.type, 0.7);
};
};
reader.onerror = reject;
});
}
```
这个函数接受一个文件对象、最大宽度和最大高度,并返回一个 Promise,该 Promise 将解析为经过压缩的文件对象。您可以在上传文件之前调用此函数,然后将返回的文件对象上传到服务器。