img onload 作用

`onload` 是一个 HTML 图片元素（`<img>`）的事件属性。当图片加载完成时，该事件会被触发。可以使用 `onload` 属性来指定一个 JavaScript 函数，以便在图片加载完成后执行一些操作，例如修改图片的样式，或者显示一个消息。

例如，以下代码会在图片加载完成后，将图片的宽度修改为 200 像素：

<img src="example.jpg" onload="this.width=200;">

需要注意的是，如果图片已经被浏览器缓存过，那么 `onload` 事件可能不会被触发。因此，如果需要确保在加载完成后执行某些操作，可以使用 JavaScript 来创建一个新的图片对象，然后将其 `src` 属性设置为所需的图片 URL。在这种情况下，可以使用 `onload` 事件来确保新图片已经加载完成。

相关问题

img.onload = CanvasDisplay();

在JavaScript中，当你使用`img.onload`这样的语法，这是处理图片加载完成事件的一种常见做法。这里的`img`代表图像元素，`onload`属性设置了一个函数，当图片完全加载完成后会被调用。

`CanvasDisplay();`这部分通常是期望在图片加载完毕后执行的一个函数，它通常会与`Canvas`（HTML5的绘图API）一起工作。这个函数的作用可能是初始化一个`Canvas`，然后将图片的数据绘制到`Canvas`上，或者对图片进行某种形式的处理和显示。

下面是一个简化的例子：

function CanvasDisplay() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 获取图片数据
  const img = new Image();
  img.src = 'image_url';
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 或者对图片进行其他操作，如缩放、旋转等
    // ...
    document.body.appendChild(canvas); // 将canvas添加到页面上展示
  };
}

img.onload = CanvasDisplay; // 当图片加载完成后立即执行CanvasDisplay函数

在这个例子中，`CanvasDisplay`函数负责创建一个新的`canvas`，设置其尺寸与图片匹配，然后将图片绘制上去，并最终将canvas添加到DOM中展示图片。

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 代码，例如向控制台输出日志信息。