前段时间做了个图片的居中裁切效果，逻辑是从网上抄的，总体上说难度不算高，不过这里遇到了调用时机的问题。网上的那个实例中图片的高度和宽度都是以img标记的width和height属性显示标明的，这样在文档加载完成以后就可以得到图片的高宽值。但是在我的应用场景中图片不确定，只有在图片加载完毕之后才能知道它的高宽。
对于既没有指定width和height属性，也没有定义对应css样式的img标记，在document的ready事件处理函数中是取不到高宽值的。文档加载完成的时候其实图片并没有加载完毕，自然也没办法取得图片的尺寸。
既然文档加载完成时不能获取图片尺寸，自然会想到图片加载完成之后总可以了吧。很遗憾，如果直接使用img的onload事件，处理函数根本不会执行。浏览器在解析到img标签的时候就开始根据src加载图片了，而这时绑定onload事件处理函数的逻辑还没有开始执行。
可以通过javascript创建一个Image对象，绑定onload事件处理函数，然后对src属性赋值。这样事件处理函数可以正常触发，并且src指定的图片为当前页中的图片，浏览器会从缓存中加载而不会再次向服务器发出请求。这一招“移形换影”可以解决无法绑定onload事件处理函数的问题。
另外一个方法是事先不去指定img标记的src属性或指定一张空白图片，在用javascript绑定好事件处理函数之后再对src赋值。不过这种动态加载图片的方法对于图片较多的情况，管理这些图片地址也是件麻烦事。可以考虑把图片地址先放在自定义属性值里，到时候再赋值给src属性。
几天之后才发现了另外一种更简单的方法，直接指定img标记的onload属性。不过这样就没有现成的“this”变量可用，只能把img标记本身当参数传入，例如：<img src="..." onload="callback(this)" />