javascript - 为什么需要先显示图片才能让 jquery 图像放大镜工作？

Question

我在一个托管音乐、图片和视频的网站上工作。我目前有 4 页，标题页、音乐页、视频页和图像页。这很好用，但我希望能够同时播放音乐和查看图片。为此，我创建了一个 HTML 文档，每个以前的页面都放在一个带有描述性类名的 div 中。然后，我编写了一个 javascript 函数，在调用每个 div 时显示和隐藏它，因此该页面就像是 4 页，但实际上不是。所以我将音乐播放器嵌入到一个页脚 div 中，它在音乐播放时保持打开状态，这意味着您可以在每种媒体类型之间来回切换，同时保持音乐页脚打开和播放。这就是问题所在。完成此操作后，我在图像页面上使用的图像放大镜 jquery 函数将不再正常工作，除非图像 div 在页面打开时显示在开头。只有这样，您才能在媒体类型之间切换并仍然放大图片。如果标题 div 首先显示(就像它应该的那样)，然后您尝试放大图像，那是行不通的。

起初我以为可能是某些外部 javascript 库相互之间产生了负面影响，但后来我偶然发现了我上面解释的内容，现在我只是不知道为什么图像需要成为第一件事显示放大镜才能正常工作。

我使用的 jquery 代码称为 jQuery Image Magnify，它由 Dynamic Drive 制作。

编辑:我隐藏和显示 div 的方式是使用 style="display:none"隐藏和使用 style="display:block"显示。

Answer 1

有趣的问题。可能是因为元素需要实际可见才能运行 jQuery Image Magnify 函数。我敢打赌，该插件使用 imageElement.onload 作为图像放大处理程序或类似的东西，我认为如果图像元素被隐藏，它就不起作用。

就解决方案而言，尝试将您的图像设置为在页面首次加载时可见，可能将左侧设置为 -9999 像素或类似的愚蠢的东西，这样它在技术上仍然是“可见的”，但用户看不到它。然后，在图像加载并(希望)被放大或插件执行任何操作后，将其移动到其页面应该位于的 div 的子级并摆脱负左值。