Image 是否由于动态图像加载而错误计算对话框位置？

我正在开发一个图库类型的应用程序-一个模板在单击时会弹出一个对话框，以便查看更大的缩略图。映像的服务器路径包含为模板变量

Gallery.Templates.Popup = "\
    <div class='popup'>\
        <img class='popup-image' src='{{image-path}}' />\
        <div class='name'>{{name}}</div>\
        <div class='caption'>{{caption}}</div>\
        <div class='dimensions'>{{dimensions}}</div>\
        <div class='price'>{{price}}</div>\
    </div> \
";

除第一次加载图像外，此操作效果非常好。对话框是构建和显示的，但是当html字符串附加到dom时，它缺少图像。它导致的问题是在定位对话框时：

对话框位于屏幕中间，像这样： 左=window.width/2-dialog.width/2

但由于图像不存在，dialog.width变量不正确。同样，这只会在第一次单击缩略图时发生，我猜图像会被缓存以供后续单击

是否可以通过某种方式预取图像来处理此问题？如果是这样，它们是否需要连接到dom才能被缓存，或者我可以将它们加载到数组中

---

非常感谢

如果您可以提前从服务器获取图像大小，您可以使用它来帮助您适当地调整“.popup”div的大小

如果不需要图像，那么预取图像听起来是个坏主意，我想不出一种方法来确保在以编程方式生成特定图像的html之前加载该图像