由于动态图像加载，对话框位置计算不正确

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 = 窗口.宽度/2 - 对话框.宽度/2

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

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

非常感谢 ！

Answer 1

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

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