jquery 获取html <img /> 位置时出错问题

 

如图所示，这样端口小图片都是通过jquery html()方法设置的(参数html就是画整个图片的html字符串)，如图：

 

但是出现图片没有完全渲染完的问题，如图：

 

从图中可以看出在代码运行到断点的时候，图中的下行小图片是没有渲染完成的。

然后公司同事李蕾猜测可能是上行图片加载快有缓存所以都显示出来，但是下行图片和上行图片不是同一个图片，所以还没有显示出来，于是就出现这样的问题，如图：

如图所示，这些图标是根据小图片位置画出来的，代码如下：

//画hub图
var drawnHub = function () {
    var p;
    for (var i = 0; i < portarr.length; i++) {
        var count = portarr[i].id.split('_')[3]; //获取端口绑定数量
        var s = $("#" + portarr[i].id);
        p = s.position(); //获取坐标点
        if (portarr[i].imgclass == "zwimg24") {
            p.left += 100;
        }
        if (portarr[i].imgclass == "zwimg48") {
            p.left += 10;
        }
        //console.log("id=" + portarr[i].id + ",left=" + p.left + ",top=" + p.top);
        if (portarr[i].state == "up") {
            s.before("<div style='width:30px;position:absolute;z-index:1;left:" + (p.left + 15) + "px;top:-40px'><div style='width:1px;height:40px;background-color:#273239'></div>" +
                "</div><img style='cursor:pointer;width:30px;height:30px;position:absolute;left:" + (p.left) + "px;top:-65px' src='../Images/network_hub_up.png' onclick='openPortDlg(\"" + portarr[i].click + "\")' />" +
                "<div style='width:30px;text-align:center;position:absolute;left:" + (p.left) + "px;top:-75px'>" + count + "</div>");
        } else {
            s.before("<div style='width:30px;position:absolute;left:" + (p.left + 15) + "px;top:31px'><div style='width:1px;height:40px;background-color:#273239'></div>" +
                "</div><img style='cursor:pointer;width:30px;height:30px;position:absolute;left:" + (p.left) + "px;top:64px' src='../Images/network_hub_down.png' onclick='openPortDlg(\"" + portarr[i].click + "\")' />" +
                "<div style='width:30px;text-align:center;position:absolute;left:" + (p.left) + "px;top:87px'>" + count + "</div>");
        }
    }
    //console.log("======================================================");
};

我们再把问题走一遍：jquery .html()方法设置<img>的时候下行图片没有渲染完成，上行渲染完成，于是再画hub(就是图片上的白色图标)的时候上行的坐标位置能获取到，但是下行图标位置获取不到，所以就出现这样的错乱问题，那么现在的问题就是如何解决这个问题，按照我的思路就是图标没有显示，但是我们可以用一个div 或者其它的标签放到<img>的上层定位，这样不就可以了吗，就算img没有渲染完成，但是上层已经渲染完成了，我可以根据上层渲染完成的位置画hub这样就ok了，果然，问题就是这样解决的，如本篇文章一开始的图片，上面显示的<li>就是当作<img>的上层，这样显示就没有问题了。

写下这篇文章是预防以后出现类似的问题，也给友友们提供解决方法参考。