0

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

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 才能被缓存，或者我可以将它们加载到数组中吗？

非常感谢 ！

4

1 回答 1

0

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

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

于 2012-05-05T01:26:03.997 回答