本文整理了JavaScript中判断图片加载完成的三种常见方法。通过onload属性绑定、原生DOM元素监听以及jQuery的load事件，分别实现了图片加载后的显示、提示及渐现效果。文章对比了各方法的优缺点，包括代码位置限制、HTML侵入性及库依赖情况，帮助开发者根据实际需求选择合适方案。
引言
在前端开发中，获取图片信息（如尺寸）往往需要等待图片加载完毕，以便执行相应的回调函数并触发特定的显示效果。本文梳理了几种常用的JavaScript判断图片加载完成的方法，并结合代码示例与实际应用场景进行解析。
onload属性方法
onload属性方法
该方法通过向<img>标签直接添加onload属性，并指定回调函数来执行后续JavaScript逻辑。例如，图片默认隐藏，加载完成后通过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标签上显式添加onload属性。若无法直接修改HTML代码，或追求代码精简，此方法不适用。
原生JavaScript方法
原生JavaScript方法
通过选取指定ID的图片元素，利用原生JavaScript的onload事件指定回调函数。图片加载完成后，可执行如弹出提示等操作。
HTML代码如下：
<img id="pic1" src="..." />
<script language="JavaScript">
document.getElementById("pic1").onload = function () {
alert("图片加载已完成");
}
</script>优点：代码简洁，不侵入HTML结构。
缺点：仅能针对单个指定元素生效，且JavaScript代码必须放置在图片元素标签之后。
jQuery方法
jQuery方法
为所有class为pic1的图片元素绑定事件，利用jQuery的load方法实现图片加载后的渐现效果。
注意：不要在$(document).ready()内部绑定load事件，否则可能无法正确触发。
JavaScript代码如下：
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>优点：可批量绑定元素事件，且不修改HTML源码。
缺点：依赖jQuery库，且JavaScript代码需放置在目标元素之后。