在前端开发中，对图片的处理是一个常见的任务，而获取图片的尺寸、确定图片的加载状态等操作往往依赖于图片加载完成这一前提条件。本文将介绍如何使用JavaScript来判断图片是否加载完成的三种方法。
### 1. 使用onload事件处理图片加载完成
onload事件是HTML的一个属性，它可以被绑定到<img>标签上。当图片完全加载完成后，onload事件会被触发，开发者可以在这个事件中执行一些操作。以下是使用onload事件判断图片加载完成的示例代码：
```html
<img class="pic1" onload="get(this)" src="" style='display:none'/>
<script type="text/javascript">
function get(ts) {
ts.style.display='block'; // 显示图片
}
</script>
```
**优点：**
- 可以将JavaScript代码与HTML内容分离，保持HTML的整洁。
- 适用于任何图片，操作简单且容易理解。
**缺点：**
- 需要在每个<img>标签上单独设置onload属性，增加代码量。
- 在某些动态生成图片或者无法直接修改HTML的场景下不适用。
### 2. 使用JavaScript原生方法检测图片加载完成
除了使用onload属性，JavaScript原生也提供了检测图片加载完成的方法。通过`document.getElementById()`函数获取到DOM元素后，可以为该元素添加一个onload事件监听器。示例如下：
```javascript
document.getElementById("pic1").onload = function() {
alert("图片加载已完成");
};
```
**优点：**
- 不需要修改HTML标签，直接在JavaScript代码中控制。
- 操作直观简单。
**缺点：**
- 只能对单个元素进行操作，如果页面上有多个图片，需要为每个图片重复上述代码。
- JavaScript代码需要紧跟在图片元素的下方，对HTML结构有轻微影响。
### 3. 利用jQuery的load事件处理图片加载完成
jQuery作为流行的JavaScript库，为处理图片加载提供了更便捷的途径。通过jQuery的`load`事件，我们可以对指定的图片元素进行批量操作。示例如下：
```javascript
$(function() {
$('.pic1').each(function() {
$(this).load(function() {
$(this).fadeIn();
});
});
});
```
**优点：**
- 可以对多个具有相同类名的图片进行批量操作，提高开发效率。
- 代码不会影响到HTML内容，保持结构的整洁。
**缺点：**
- 需要依赖jQuery库，因此项目中需要先引入jQuery。
- 代码需要放在操作元素之后，可能会稍微影响到页面的加载顺序。
### 总结
以上介绍的三种方法各有优缺点，开发者在实际应用时可根据项目的具体需求和环境来选择合适的方法。使用onload属性适合单个图片或者需要与HTML标签分离的场景；JavaScript原生方法适合于简单且直接的单个图片处理；而jQuery的load事件则适合于需要处理多个图片且不介意引入jQuery库的情况。在实际开发过程中，务必注意图片的加载状态，以确保获取的图片信息是准确有效的。
