关于jquery：如何通过JavaScript加载图片时显示微调框

我目前正在使用一个Web应用程序，该应用程序的页面显示一个图表(.webp图像)。在此页面的另一部分上，有一组链接，当单击这些链接时，整个页面将重新加载，并且外观与之前完全相同，除了页面中间的图表。

我想要做的是单击页面上的链接时仅更改页面上的图表。由于页面大约100kb大，这将极大地加快处理速度，并且实际上并不想为了显示此页面而重新加载整个页面。

我一直在通过JavaScript进行此操作，到目前为止，该JavaScript可以使用以下代码进行操作

问题在于，当用户单击链接时，图表更改可能需要几秒钟的时间。这使用户认为他们的点击没有执行任何操作，或者系统响应速度很慢。

我要发生的是显示一个微调器/抖动器/状态指示器，以代替图像加载时的位置，因此，当用户单击链接时，他们至少知道系统已接受输入并正在执行操作关于它的东西。

我尝试了一些建议，甚至使用psudo超时来显示微调框，然后再飞回图像。

我收到的一个很好的建议是使用以下

这是理想的选择，但是微调器明显小于正在显示的图表。

还有其他想法吗？

我已经使用过类似的方法来预加载图像，然后在图像加载完成后自动调用我的JavaScript。您想在设置回调之前检查完成情况，因为图像可能已经被缓存，并且可能不会调用您的回调。

您可以显示一个静态图像，像这样，给人以刺眼的感觉。

使用jQuery的load()方法，很容易在图像加载后立即做一些事情：

请参阅：http：//api.jquery.com/load-event/

使用setTimeout()函数的功能(更多信息)-这使您可以设置计时器以在将来触发函数调用，并且调用它不会阻止当前/其他函数的执行(异步。 )。

在图表图像上方放置一个包含微调框的div，并将其css display属性设置为none：

隐藏微调器时，nbsp阻止div崩溃。没有它，当您切换微调器的显示时，您的布局将"抽动"

使用CSS将加载动画设置为图像容器的居中背景图像。

然后在加载新的大图像时，首先将src设置为预加载的透明1像素gif。

例如

正在加载large_image.webp时，背景将通过1pix透明gif显示。

前段时间，我编写了一个jQuery插件，该插件可以自动显示微调器http://denysonique.github.com/imgPreload/

查看其源代码应该可以帮助您检测何时显示微调器，并将其显示在加载的图像的中心。

基于Ed的答案，我希望看到类似以下内容的内容：

您的回调可以在适当的位置显示图像并放置/隐藏微调框，并且errorCallback阻止您的页面"陷入困境"。所有事件驱动，无需计时器或轮询，再也不必添加其他if语句来检查在设置事件的位置图像是否已完成加载-因为它们是预先设置的，因此会触发不管图像加载有多快。

我喜欢@duddle \\的jquery方法，但发现load()并不总是被调用(例如，当从IE中的缓存中检索图像时)。我改用以下版本：

最多调用一次加载，如果已经完成加载，则立即调用。

请注意，如果图像src不存在(http 404错误)，也会调用回调函数。为避免这种情况，您可以检查图像的宽度，例如：

除了lowsrc选项外，我还在img \\的容器上使用了background-image。

将微调器放入与图表相同大小的div中，您知道其高度和宽度，因此可以使用相对定位将其正确居中。

我会添加一些随机数字以避免浏览器缓存。

@iAn的解决方案对我来说很好。我唯一要更改的是不使用setTimeout，而是尝试挂接到图像\\'Load \\'事件。这样，如果图片下载时间超过3秒，您仍然可以使用微调器。

另一方面，如果下载时间较少，则可以在不到3秒的时间内获得微调器。