为什么jquery中的前两个图像加载不正确

Question

我知道我的问题很复杂，我真的希望有人能帮助我。我已经创建了一个图片库，qih，jquery和php。首先，我从MySql数据库中获取所有图像名称，然后从服务器文件夹中获取它们，并使用php调整它们的大小。它创建了缩略图，然后我用jquery创建了一个弹出窗口，该窗口以大图显示图像。在那之后，我放置了一个上一个和下一个按钮，并告诉jquery从php获取图像结果数组，并使用json将它们回显到jquery中。然后，它遍历数组以创建下一个和前一个效果。然后，当单击“下一步”和“上一步”按钮时，我将每个图像居中。当您加载第一张和第二张图片时，它没有居中，而是向右移动。我不明白为什么会发生这样的事情。我真的需要一些帮助。这里有太多的代码要发布，所以我给你这个网站，你可以在源代码中看到几乎所有的东西。请记住，我使用的是php，所以如果你想知道它是如何迭代图片的，这是为什么。如果有人能帮我的话，谢谢。

http://www.oceanphotostudio.com/test/collection/before-and-after.php

Answer 1

得到偏移量的原因是在加载图像之前计算了居中弹出窗口div的边距。请注意，在第一次单击时，它的边距将为-37px和-30px。加载一个图像后，调用另一个图像将使用加载的最后一个图像的宽度和高度，这就是为什么您会得到不可预测的结果。

有关如何在图像设置为加载之后而不是之前创建调整大小的回调的信息，请查看JQuery's load event handler。

Answer 2

你的描述完全把问题复杂化了。浏览器可能不关心您如何在服务器上生成数组或html，或者它是什么语言。

你的位置问题是一个简单的css问题。您已将弹出窗口的top和left设置为50%。这意味着弹出窗口的左上角将从页面的死角开始，然后从那里向右和向下移动。

使用浏览器控制台检查html元素和应用于它们的css规则，并相应地进行调整。WIthin控制台您可以进行实时编辑，以实时查看调整的影响