JavaScript判断图片加载完成的3种常用方法

引言

在前端开发中，获取图片信息（如尺寸）往往需要等待图片加载完毕，以便执行相应的回调函数并触发特定的显示效果。本文梳理了几种常用的JavaScript判断图片加载完成的方法，并结合代码示例与实际应用场景进行解析。

onload属性方法

onload属性方法

该方法通过向<img>标签直接添加onload属性，并指定回调函数来执行后续JavaScript逻辑。例如，图片默认隐藏，加载完成后通过onload触发显示逻辑。

<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事件指定回调函数。图片加载完成后，可执行如弹出提示等操作。

<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事件，否则可能无法正确触发。

<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
  });
    });
})
</script>

优点：可批量绑定元素事件，且不修改HTML源码。

缺点：依赖jQuery库，且JavaScript代码需放置在目标元素之后。