工作中遇到一个问题，内容部分包含一些图片链接（img标签不在页面，而是某个字段的内容包含图片），当页面加载时再调整图片图片以适应页面。

起初想法很简单，代码如下

//$("img[src*='/CRFDPIC/']").each(function () {
        //    $(this).css('cursor', 'hand');
        //    $(this).click(function () {
        //        _zoomPic(this);
        //    })
        //    var width = parseFloat($(this).attr('width'));
        //    var height = parseFloat($(this).attr('height'));
        //    if (width > height) {
        //        if (width > imaxwidth) {
        //            $(this).removeAttr('width');
        //            $(this).removeAttr('height');
        //            $(this).attr('width', imaxwidth);
        //            $(this).attr('height', (imaxwidth * height) / width);
        //        }
        //    }
        //    else {
        //        if (height > imaxhight) {
        //            $(this).removeAttr('width');
        //            $(this).removeAttr('height');
        //            $(this).attr('height', imaxhight);
        //            $(this).attr('width', (imaxhight * width) / height);
        //        }
        //    }
        //})

当网速足够快或页面有缓存时，该代码确实将不合适的图片调整成了适应页面的大小，但是当遇到大图片或者网页速度不够快时便失效了。

出现该问题，调试js，发现代码并无报错，但是-设置断点后发现(this)为空，恍然大悟，图片还未加载好，js就已经执行完了！

发现问题，就想着只能在图片加载完之后再执行调整大小的操作了，所以给图片绑定load事件。


var imaxhight = 620;
var imaxwidth = 620;
var bmpmaxwidth = "22px";
$("img[src*='/CRFDPIC/']").one("load", function () {
    //alert($(this).attr("src"));
    $(this).css('cursor', 'hand');
    $(this).click(function () {
        _zoomPic(this);
    });
    var width = this.width;
    var height = this.height;
    if (width > height) {
        if (width > imaxwidth) {
            $(this).removeAttr('width');
            $(this).removeAttr('height');
            $(this).attr('width', imaxwidth);
            $(this).attr('height', (imaxwidth * height) / width);
        }
    }
    else {
        if (height > imaxhight) {
            $(this).removeAttr('width');
            $(this).removeAttr('height');
            $(this).attr('height', imaxhight);
            $(this).attr('width', (imaxhight * width) / height);
        }
    }
}).each(function () {
    if (this.complete) {
        $(this).load();
    }
});

代码中

//    var width = parseFloat($(this).attr('width'));
//    var height = parseFloat($(this).attr('height'));

修改为

var width = this.width;

var height = this.height;

因为加载到的图片，jQuery对象不一定有这两个属性，而dom元素可以获取到这两个属性。


为所有选择器命中的图片绑定一次load事件（bind、或者直接使用.load（function（）{}都是可以的，但是这个事件不是只使用一次吗，对吧），在each中判断如果该图片加载完毕了则调整图片大小。


不能直接在each中进行操作，因为图片还没加载完。

这里one只是绑定一个事件到符合选择器的已存在元素上。


.delegate()

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

delegate可以给不存在元素预先绑定事件，当元素通过append等方式加载上之后就已经绑定好该事件了