有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的 javascipt 判断图片加载完成时的方法，并通过代码与实际应用相结合进行解释与说明。

onload 方法

通过向 img 标签添加 onload 属性，并填入相应的函数来执行后续的 javascipt 代码。如下代码例子中 img 元素默认是不显示的，通过 onload 判断加载完成后再将图片显示出来。

优点：可以将 javascript 代码部分放置于页面的任何部分加载，并且可以用于多数任意图片上。使用比较简单，易理解。

缺点：必须在每个标签上都贴上 onlaod 属性，在某些无法直接操作 HTML 代码，或者需要代码精简的情况下不适用。

javascipt 原生方法

选取指定 ID 的图片，通过 onload 指定回调方法，在图片加载完成后弹出“图片加载已完成”字样提示。

优点：简单易用，不影响 HTML 代码。

缺点：只能指定一个元素，javascipt 代码必须置于图片元素的下方。

jquery 方法

为每个 class 为 pic1 的图片元素绑定事件，通过 jquery 的 load 方法，将元素渐现出来。

注意，不要在$(document).ready()里绑定 load 事件。

优点：可以批量绑定元素事件，并且不影响 HTML 代码内容。

缺点：需要 jquery 库的支持，代码需要放置到需要操作元素的下方。