android 浏览器对图片加载高度渲染问题

浏览数：26 / 时间：2015年06月11日

今天在开发有道汉语词典移动版的时候遇到了一个很奇怪的问题。

在android设备上访问的时候，总是发现有底部背景色不能完全渲染出来的情况（有时候又是正常的，一会儿出现一会儿不出现，iphone设备也是完全ok），就是一半是底色，还有一半没了。。。

仔细观察了一下发现在打开网页的时候先显示了头部的小图片和标题以及底部的按钮，再显示中间的大图，有个加载过程。

ok，怀疑是图片还没加载完毕，导致高度计算出错，给底部设背景的时候加载完的那块就没颜色。。。

那么使用$(window).load()函数来解决！

网上有个解释：

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

看着像哈，代码如下：

        var height = document.body.clientHeight;
        $("#doc2").css("height", height+"px");
        $("#doc2").css("background-color", "E84C32");

好吧，不管用，还是有这个现象。。。

干脆给图片加判断吧，我获取了第一个slider，然后判断它的onload

    var setPosition = function(){
        var height = document.body.clientHeight;
        $("#doc2").css("height", height+"px");
        $("#doc2").css("background-color", "E84C32");
    }

    var img = $(‘#firstimg‘);

    if (img.prop(‘complete‘)) {
        setPosition();
    } else {
        img.load(function() { setPosition(); });
    }