jquery - 在现有图像上方显示 ajax 加载图像的最佳方式是什么？

Question

我有一个小图像列表。当我单击一个时，我会进行 ajax 调用以从服务器加载一些内容。因为这需要几秒钟，所以我想在现有图像上覆盖一个 ajax 加载图标，同时将拇指邮件变灰以显示正在加载某些内容。

在图像中间覆盖 ajax 图标的最佳方法是什么。我知道我可以用这样的方式将它放在图像旁边（当我单击图像时）：

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(this);

但我想把它放在图像的顶部（并且它们变灰）而不是放在一边，因为上面的代码会导致所有其他图像移动并且看起来有点偏离。

Answer 1

我使用spin.js，包裹在这个小 jquery 插件中。

所以我只是这样做：

$el = $("#el");  // cache element fo further reference

$el.spin();      // put spinner in the middle of selected element.

// do your stuff...

$el.spin(false); // dismiss spinner.

看到它住在这里。