php - 如何在图像上叠加忙碌图标？

Question

我一直在浏览 SO 和 Google，试图找到一种简单的方法来在现有图像上覆盖繁忙的图标。在对图像应用滤镜和效果时，我想让用户知道它正在通过在当前图像顶部显示忙碌图标来处理。

我是否需要创建某种覆盖图像，在进程开始时显示并使用 jquery 完成后隐藏？

只是从可能已经这样做过的人那里寻找一些想法。

Answer 1

正如@Diodeus所说，理想情况下你应该在图像周围有一个包装器，这样定位加载图像的问题相对于图像来说是微不足道的。

如果包装器不是一个选项(即您正在使用现有的、不可更改的标记，或者包装器会破坏您的 CSS 整体，这并不是世界末日。您可以将图标放在图像，利用 jQuery 可以轻松获取元素相对于主体的坐标，而不仅仅是其相对父/祖先。

HTML(直接将其放在正文中，而不是嵌套)

<img src='loading.png' id='loading' />

CSS

#loading { position: absolute; display: none; /* other styles, BG img etc */ }

JavaScript(el 是相关的页面元素)

var loading_img = $('#loading');
function func_called_when_stuff_happening(el) {
    var el_coords = $(el).offset();
    loading_img.show().css({
        left: el_coords.left + (($(el).width() / 2) - (loading_img.width() / 2)),
        top: el_coords.top + (($(el).height() / 2) - (loading_img.height() / 2)),
    });
}

这会将图标放在元素的中间。