由于动态图像加载，错误地计算对话框位置？

Question

我正在开发一个图库类型的应用程序 - 一个模板将一个弹出对话框组合在一起，以便在单击时获得更大的缩略图图像。图像的服务器路径包含在模板变量中。

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时，它缺少图像。它导致的问题是定位对话框：

对话框位于屏幕中间，如下所示： left = window.width / 2 - dialog.width / 2

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

这是通过以某种方式预取图像来处理的吗？如果是这样，是否需要将它们附加到dom才能进行缓存，或者我可以将它们加载到数组中吗？

非常感谢！

Answer 1

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

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