Javascript 图像加载后，弹出Twitter引导弹出窗口未在正确位置显示

我有一个问题，在加载图像后，我的指针标记不在正确的位置。 我注意到，当我将鼠标悬停在图像上时，它位于正确的位置，但由于图像仅在javascript运行后加载，因此如果图像具有一定的宽度和高度，它会向下推“指针标记”

$("#prodImage").popover(
            {
              title: "#Title Here",
              trigger:"hover",
              content: "<img src='path_to_image' />",
              placement:'right'
            });

$（“#prodImage”）.popover(
{
标题：“#此处标题”，
触发器：“悬停”，
内容：“，
位置：'正确'
});

不正确外观的示例：

---

应位于手表所在的徽标处。

这是默认行为

箭头将自动位于框的中心，就像在CSS中一样，它的top属性是50%

.popover.right .arrow { top: 50%;}. 

---

您需要手动定位它

加载图像后，您还可以尝试修复popover，使其自身再次对齐。请参阅

中的注释如果您的popover中已卸载图像，则可能需要预加载它们

这里有一个对我有用的小预加载技巧

HTML

Javascript

$('#show_cc_cvv_help').popover({
    html: true,
    content: '<img src="/static/img/cc_cvv.png" alt="CVV Code">'
});

$（'show#cc_cvv_help'）.popover({
是的，
内容：“”
});

这对我很有效。另一种预加载图像的方法，但全部使用javascript

var img = new Image();
img.src = imgSrc;

img.addEventListener('load', function() {
  //wait until image load is done before loading popover, 
  //so popover knows image size
    $myJQueryThumbnailImgObj.popover({
        html: true,
        trigger: "hover",
        placement: "right",
        delay: { "show": 300, "hide": 100 },
        content: "<img src='" + imgSrc + "' style='height:" + img.height + "'; width:'" + img.width + "'/>",
    });
}, false);

var img=newimage（）；
img.src=imgSrc；
img.addEventListener（'load'，function（）{
//在加载popover之前，请等待图像加载完成，
//所以popover知道图像大小
$myJQueryThumbnailImgObj.popover({
是的，
触发器：“悬停”，
位置：“对”，
延迟：{“显示”：300，“隐藏”：100}，
内容：“，
});
}，假）；

把它作为答案，我会给你投票。好的，把它作为答案贴出来。

$('#show_cc_cvv_help').popover({
    html: true,
    content: '<img src="/static/img/cc_cvv.png" alt="CVV Code">'
});

var img = new Image();
img.src = imgSrc;

img.addEventListener('load', function() {
  //wait until image load is done before loading popover, 
  //so popover knows image size
    $myJQueryThumbnailImgObj.popover({
        html: true,
        trigger: "hover",
        placement: "right",
        delay: { "show": 300, "hide": 100 },
        content: "<img src='" + imgSrc + "' style='height:" + img.height + "'; width:'" + img.width + "'/>",
    });
}, false);