Javascript 此函数仅在我添加警报时起作用

我已经修改了一些代码，允许在弹出窗口中播放视频，在我发出警报后，弹出窗口只能正确地放置在左侧、右侧、顶部或底部。视频播放，所以这不是问题所在。我假设该警报是在为获取坐标以确定弹出窗口的位置而争取时间。它可以很好地处理图像和文本，没有问题

(function (diagram) { 
    $(document).ready(function () {

        var diagramData = window.svgpublish.diagramData;
        $.each(diagramData, function (shapeId, shapeData) {

            var props = shapeData.Props;
            if (!props)
                return;
            var $shape = $("#" + shapeId);


            // decorate the shape with "hand" cursor
            $shape.css("cursor", "pointer");

            // hide the popover hiding when clicked outside
            $('body').on('click', function (e) {
                $shape.popover('hide');
            });

            $shape.on('click', function (evt) { 
                evt.stopPropagation();
                //***** For Clicking the icon to show the popup ********//
                //$shape.popover('toggle');

            });

            $shape.on('mouseover', function () {
                $(this).attr('filter', 'url(#hover)');
                //***** For Mousing Over the icon to show the popup ********//
                $shape.popover('show');
                //$shape.popover('toggle');
            });

            $shape.on('mouseout', function () {
                $(this).removeAttr('filter');
                //***** For Mousing Out of the icon to hide the popup ********//
                //$shape.popover('toggle');
                $shape.popover('hide');
            });

            $shape.tooltip({
                container: "body",
                //title: props.title + ' - click to open/close'
            });

            var ImageOption = {
                placement: function (context, source) {
                    var position = $(source).position();
                    if (position.right > 500)
                        return "left";
                    if (position.left < 500)
                        return "right";
                    if (position.top < 300)
                        return "bottom";
                    return "top";
                },
                trigger: "manual",
                container: "html",
                html: true,
                content: '<img src="'+props.image_path+'"></img>'
            };

            var VideoOption = {
                placement: function (context, source) {
                    var position = $(source).position();
                    alert(position.left);
                    if (position.right > 500)
                        return "left";
                    if (position.left < 500)
                        return "right";
                    if (position.top < 300)
                        return "bottom";
                    return "top";
                },
                trigger: "manual",
                container: "html",
                html: true,
                content: '<video autoplay>' +
                '<source src="'+props.video_path+'" type="video/mp4"></source>' +
                '</video>'
            };

            if (props.eB_Image == "yes"){
                //alert("we have an image");
                $shape.popover(ImageOption);
            };

            if (props.eB_Video == "yes"){
                //alert("we have a video");
                $shape.popover(VideoOption);
            };
        });
    });
})(window.svgpublish);

（函数（图）{
$（文档）.ready（函数（）{
var diagramData=window.svgpublish.diagramData；
$.each（diagramData，function）（shapeId，shapeData）{
var props=shapeData.props；
如果（！道具）
返回；
var$shape=$（“#”+shapeId）；
//用“手”光标装饰形状
$shape.css（“光标”、“指针”）；
//在外部单击时隐藏popover隐藏
$（'body'）。在（'click'，函数（e）上{
$shape.popover（'hide'）；
});
$shape.on（'click'，函数（evt）{
evt.stopPropagation（）；
//*****用于单击图标以显示弹出窗口********//
//$shape.popover（'toggle'）；
});
$shape.on（'mouseover'，function（）{
$（this.attr（'filter'，'url（#hover'）；
//*****用于将鼠标悬停在图标上以显示弹出窗口********//
$shape.popover（'show'）；
//$shape.popover（'toggle'）；
});
$shape.on（'mouseout'，function（）{
$（this.removeAttr（'filter'）；
//*****用于鼠标移出图标以隐藏弹出窗口********//
//$shape.popover（'toggle'）；
$shape.popover（'hide'）；
});
$shape.tooltip({
容器：“主体”，
//标题：props.title+“-单击打开/关闭”
});
var ImageOption={
位置：函数（上下文、源）{
var position=$（source.position（）；
如果（位置右侧>500）
返回“左”；
如果（位置左<500）
返回“正确”；
如果（位置顶部<300）
返回“底部”；
返回“顶部”；
},
触发器：“手动”，
容器：“html”，
是的，
内容：“”
};
var视频选项={
位置：函数（上下文、源）{
var position=$（source.position（）；
警报（位置左）；
如果（位置右侧>500）
返回“左”；
如果（位置左<500）
返回“正确”；
如果（位置顶部<300）
返回“底部”；
返回“顶部”；
},
触发器：“手动”，
容器：“html”，
是的，
内容：“”+
'' +
''
};
如果（props.eB_Image==“是”）{
//警惕（“我们有图像”）；
$shape.popover（图像选项）；
};
如果（props.eB_视频==“是”）{
//警报（“我们有视频”）；
$shape.popover（视频选项）；
};
});
});
})（window.svgpublish）；

你知道为什么会这样吗？是因为加载视频需要一段时间，我应该预加载吗

我已经搞了将近10个小时了，我不知道为什么会这样

有人有什么建议吗？我已经研究过这个问题，但似乎没有一个解决方案在这里起作用

---

谢谢。

阅读您问题的标题后，我的直觉是您正在尝试同步运行异步操作。但是我没有看到任何承诺。也许你的JS在你的html加载之前执行？嗨，艾米。你看到任何承诺是什么意思？不幸的是，我不是一名程序员，正在使用现有代码添加一些视频。也许JS在加载HTML之前就执行了，但它为什么适用于图像和文本弹出窗口？这是令人难以置信的。你应该用

$（document）.ready（

而不是包装它）来包装所有东西。