移动web开发手记--判断页面图片加载完成后获取图片高(控制图片高度)

笔者作为一个开发初学者最近做一个移动端的项目的时候被要求控制页面不能出现Y轴方向的滚动条，由于页面的css和hmtl结构不是本人所写，其作者没有仔细考虑移动端适配的具体细节，因此我考虑采用js来获取上下固定元素的高度来计算出中间li的高度，但是这个过程中碰见到了深坑。

var imgheight=$(".btnimg").height;

那就是采用jq是获取图片的高度的时候会出现取值为0的情况。多次调试后发现是因为页面图片还未加载出来，就执行了获取高度的js，导致获取到的imgheight=0。导致之后的高度控制严重出错。
年经的笔者自然想到了。。。

$(document).ready(function(){
var imgheight=$(".btnimg").height;
})

结果是失败的，jquery的ready只是dom的结构加载完毕，便视为加载完成，并不会考虑图片是否加载完成，结果是获取高度为0，程序出错。于是乎楼主百度了一个方法。js的window.load方法

window.load=function(){
var imgheight=$(".btnimg").height;
}

这个方法是可行的一个方法，但是适用于小型页面，因为js的window.onload是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行onload。缺点就是当某一张图片很大的时候，一直没有加载完成，会导致js一直不执行，（不过移动端的页面基本没啥大图）但是如果页面图片少就看不出什么异常，所以这是一个可行的方法。
但是并不甘心楼主又去寻找方法，发现了一个看起来很不错的方法。

$('img').load(function(){
 var imgheight=$(".btnimg").height;
});

看起来很不错，其实不然，上面的代码每加载一张图片，回调函数就执行一次。当然效果可以实现但是很坑爹，比如你有20张图片你的代码就执行了20次，当然你可以进行修改如下：

var  imgnum=$('img').length;
$('img').load(function(){
    if(!--imgnum){
     var imgheight=$(".btnimg").height;
    }
});

这样总可以了吧，我加载一张，就用图片总数去减一，减到0我就加载完毕看起很完美，但是这个方法不兼容IE，IE的图片总是从缓存文件里去拿，这就造成load方法根本就不执行，只有是新图片才会走load。
好吧，不废话了，看看笔者最终使用的解决方案（可兼容 谷歌 火狐 IE 360）
根据一个图片没有加载完成的时候，宽高为0。我们很容易判断图片的一个加载情况。如下：

  var t_img; // 定时器
  var isLoad = true; // 控制变量
 //isImgLoad函数在所有图片加载完成后执行
 isImgLoad(function(){ 
        var imgheight=$(".btnimg").height;     // 获取图片高度
});

// 判断图片加载的函数
function isImgLoad(callback){
    // 这里需要获取的图片类名都是btnimg，只判断这些图片而不受其他大图的影响
    $('.btnimg').each(function(){
        // 找到为0就将isLoad设为false，并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }
    });
    // 如果isLoad为true，即目标图片没有发现为0的。默认为加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    }else{
        // 为false，因为找到了没有加载完成的图，将调用定时器递归
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描,再次执行判断图片是否加载函数
        },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
    }
}

到此，问题解决，希望可以帮助大家，大家有什么好方法也可以分享出来。