jquery getting HTML <img/> Location error problem

, so that the port small picture is set by the jquery HTML () method (the parameter HTML is the HTML string that draws the entire picture),

But there's a problem with the picture not being completely rendered,

It can be seen that when the code runs to the breakpoint, the lower-down picture in the diagram is not rendered.

Then the company colleague Li Lei speculation may be the uplink image loading fast cache so all show up, but the downlink picture and the uplink picture is not the same picture, so it has not been shown, so there is such a problem,

, these icons are drawn according to the position of the small picture, the code is as follows:

//draw the Hub mapvarDrawnhub =function () {    varp;  for(vari = 0; i < portarr.length; i++) {        varCount = Portarr[i].id.split ('_') [3];//get the number of port bindings        vars = $ ("#" +portarr[i].id); P= S.position ();//Get coordinate points        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 + +) + "px;top:-40px ' ><div style= ' width : 1px;height:40px;background-color: #273239 ' ></div> ' + ' </div> ' + ' <div style= ' wi Dth: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 + +) + "px;top:31px ' ><div style= ' width:1px;height : 40px;background-color: #273239 ' ></div> ' + ' </div> ' + ' <div style= ' Width:30px;text-align:center;position:absolute;left: "+ (P.left) +" px;top:87px ">" + Count + "</div>"); }    }    //Console.log ("======================================================");};

Let's go through the question again: jquery. HTML () method settings when the downward image is not rendered, the upstream rendering is complete, then the hub (is the white icon on the image) when the upstream coordinate position can be obtained, but the downlink icon location is not available, So there is such a problem, then the problem is how to solve the problem, according to my idea is that the icon is not displayed, but we can use a div or other tags placed on the top of positioning, so it is not possible, even if the IMG does not render complete, But the upper layer has been rendered, I can draw the hub based on the top rendering completed, so OK, sure enough, the problem is such a solution, such as this article at the beginning of the picture, the above display of <li> is regarded as the upper level of , so the display is no problem.

Writing this article is to prevent similar problems in the future, but also to provide friends with a solution reference.

jquery getting HTML Location error problem