img onload事件执行函数

img onload事件执行函数
一、img onload事件的作用
img onload事件是当图片加载完成后自动触发的事件。

通过此事件，我们可以实现对图片的动态处理，比如给图片添加样式、修改src属性、调用其他函数等。

二、img onload事件的应用场景
1. 图片预加载
图片预加载是指在页面加载前预先加载图片，以提高用户体验。

当所有图片都预加载
完成后再显示页面内容，可以避免图片因为网络等原因加载太慢而出现空白页面的情况。

通过img onload事件，我们可以判断图片是否已经加载完成，从而实现图片预加载。

2. 图片懒加载
图片懒加载是指在用户看到图片之前，只加载可视区域内的图片，而不加载所有图片。

通过img onload事件，我们可以在用户滚动页面时判断图片是否进入了可视区域，如果是，则加载该图片；如果不是，则不加载该图片。

这样可以避免对带宽的浪费，提高页面加载
速度。

3. 图片水印
在某些场景下，我们需要在图片上添加水印，以保证图片的版权和安全性。

通过img onload事件，我们可以实现图片加载后在图片上加上水印，从而达到版权保护的目的。

三、事件绑定方法
img onload事件的绑定方法有多种，这里介绍最常见的两种：
1. 在html标签中直接绑定事件
```html
<img src="xxx.jpg" onload="function(){}">
```
通过在img标签中添加onload事件，可以在图片加载完成后执行相应的函数。

这种方式只能绑定单个事件，不适合多个操作。

2. 使用JavaScript绑定事件
```javascript
var img = document.getElementsByTagName('img')[0];
img.onload= function() {};
```
通过获取img元素，并给其绑定onload事件，可以实现加载多个事件。

这种方式可以与其他JavaScript代码一起使用，更方便灵活。

四、事件执行函数的语法及参数
img onload事件执行函数的语法如下：
```javascript
img.onload = function() {};
```
函数中的参数为可选项，通常用于区分事件来源对象。

例如：
```javascript
var img1 = document.getElementsByTagName('img')[0];
var img2 = document.getElementsByTagName('img')[1];
img1.onload = function() {
console.log("第一张图片加载完成！");
}
img2.onload = function() {
console.log("第二张图片加载完成！");
}
```
以上代码中，两张图片分别绑定了不同的onload事件，并通过函数中的参数来区分二者。

五、事件执行函数中的应用实例
1. 图片预加载
通过img onload事件实现图片预加载，这里以预加载一张图片为例子：
```javascript
var img = new Image();
img.src = "xxx.jpg";
img.onload = function() {
console.log("图片已预加载")
}
```
2. 图片懒加载
通过img onload事件实现图片懒加载，这里以懒加载一张图片为例子：
```javascript
var imgDom = document.createElement('img');
imgDom.src = "xxx.jpg";
imgDom.style.display = 'none';
document.body.appendChild(imgDom);
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var imgOffsetTop = imgDom.offsetTop;
if (scrollTop + clientHeight > imgOffsetTop) {
imgDom.style.display = 'block';
}
}
```
3. 图片水印
通过img onload事件实现图片水印，这里以在图片上添加文字水印为例：
```javascript
var img = document.getElementsByTagName('img')[0];
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.font = '30px Arial';
ctx.fillStyle = '#fff';
ctx.fillText('水印', img.width/2, img.height/2);
img.src = canvas.toDataURL();
```
以上代码中，首先获取图片对象img，然后新建一个canvas对象，设置宽高与图片一致，将图片绘制到canvas上，接着按照需求在canvas上添加水印，并将canvas转化为base64格式的图片，最后将图片src属性修改为base64地址，实现添加水印的效果。

六、总结
通过本文的介绍，我们了解了img onload事件的作用、应用场景、事件绑定方法和事件执行函数的语法及参数，同时也分享了img onload事件在图片预加载、图片懒加载和图片添加水印等实际应用中的代码实现。

希望本文对读者有所帮助，能更好地应用和理解img onload事件。