Jquery-如何在背景上显示加载图标时变灰答案

【问题标题】：Jquery-How to grey out the background while showing the loading icon over itJquery-如何在背景上显示加载图标时变灰
【发布时间】：2020-04-20 01:50:55
【问题描述】：

当用户单击提交按钮并在灰色背景上显示加载图标时，我正在尝试使背景变灰。

下面是我试图显示的图标，但是我无法显示动画，图标只是静止不动。

这是我的html：

 <div class="container"></div>
 <div id="loading-img" style=" z-index: 20;display:none;"></div>
 <button id="button">Submit</button>

JS：

 $("#button").click(function() {
    $("#container").css("opacity",0.5);
    $("#loading-img").css({"display": "block"});
}

我不确定如何准确地使用 css 使图标在灰色背景上进行动画处理。请问有什么想法吗？？编辑::::

小提琴：http://jsfiddle.net/hnk6bLbt/1/

谢谢！

【问题讨论】：

你搞定了吗？ 确保#loading-img DIV 足够大以容纳图像。 这可能是您的问题。另外，请参阅我的答案以获得更简单的代码。
@gibberish：是的，我搞定了！！非常感谢您的帮助！！！
感谢@All 的帮助，我搞定了！！！
很高兴听到这个消息——祝您项目顺利

标签： javascript jquery html css

【解决方案1】：

我修改了您在 js fiddle 中提供的示例：http://jsfiddle.net/zravs3hp/

第一步：

我将您的 container div 重命名为 overlay，因为从语义上讲，这个 div 不是容器，而是覆盖。我还将加载器 div 作为此覆盖 div 的子级。

生成的 html 是：

<div class="overlay">
    <div id="loading-img"></div>
</div>


<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>
    <button id="button">Submit</button>
</div>

叠加层的css如下

.overlay {
    background: #e9e9e9;  <- I left your 'gray' background
    display: none;        <- Not displayed by default
    position: absolute;   <- This and the following properties will
    top: 0;                  make the overlay, the element will expand
    right: 0;                so as to cover the whole body of the page
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

第二步：

我添加了一些虚拟文本以便覆盖一些内容。

第三步：

然后，在click 处理程序中，我们只需要显示覆盖：

$("#button").click(function () {
    $(".overlay").show();
});

【讨论】：

点击后，有没有看到元素div#loading-img的显示属性从值none切换到block？
你的加载器是gif动画还是css动画？

【解决方案2】：

注意：动画 gif 没有什么神奇之处：它要么是动画 gif，要么不是。如果 gif 不可见，则 gif 的路径很可能是错误的 - 或者，在您的情况下，容器（div/p/etc）不够大，无法显示它。在您的代码示例中，您没有指定高度或宽度，这似乎是个问题。

如果 gif 显示但没有动画，请参阅此答案最底部的参考链接。

然而，显示 gif + 叠加层比您想象的要容易。

您只需要两个绝对位置的 DIV：一个覆盖 div 和一个包含加载 gif 的 div。两者的 z-index 都比您的页面内容高，并且图像的 z-index 比叠加层高 - 因此它们会显示在页面上方可见时。

因此，当按下按钮时，只需取消隐藏这两个 div。就是这样！

jsFiddle Demo

$("#button").click(function() {
    $('#myOverlay').show();
    $('#loadingGIF').show();
    setTimeout(function(){
			$('#myOverlay, #loadingGIF').fadeOut();
    },2500);
});
/*  Or, remove overlay/image on click background... */
$('#myOverlay').click(function(){
	$('#myOverlay, #loadingGIF').fadeOut();
});

body{font-family:Calibri, Helvetica, sans-serif;}
#myOverlay{position:absolute;top:0;left:0;height:100%;width:100%;}
#myOverlay{display:none;backdrop-filter:blur(4px);background:black;opacity:.4;z-index:2;}

#loadingGIF{position:absolute;top:10%;left:35%;z-index:3;display:none;}

button{margin:5px 30px;padding:10px 20px;}

<div id="myOverlay"></div>
<div id="loadingGIF"><img src="http://placekitten.com/150/80" /></div>

<div id="abunchoftext">
Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious routine of forgotten code... While I nodded, nearly napping, suddenly there came a tapping... as of someone gently rapping - rapping at my office door. 'Tis the team leader, I muttered, tapping at my office door - only this and nothing more. Ah, distinctly I remember it was in the bleak December and each separate React print-out lay there crumpled on the floor. Eagerly I wished the morrow; vainly I had sought to borrow from Stack-O surcease from sorrow - sorrow for my routine's core. For the brilliant but unworking code my angels seem to just ignore. I'll be tweaking code... forevermore! - <a href="http://www.online-literature.com/poe/335/" target="_blank">Apologies To Poe</a></div>
<button id="button">Submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

更新：

您可能会喜欢使用新的 backdrop-filter:blur(_px) css 属性，该属性为底层内容提供模糊效果，如上面的演示中所使用的... （截至 2020 年 4 月：适用于 Chrome、Edge、Safari， Android，但还没有在 Firefox 中）

参考资料：

http://www.paulirish.com/2007/animated-gif-not-animating/

Animated GIF while loading page does not animate

https://wordpress.org/support/topic/animated-gif-not-working

http://forums.mozillazine.org/viewtopic.php?p=987829

【讨论】：

【解决方案3】：

1) “容器”是一个类而不是一个 ID 2) .container - 在你的 CSS 中设置 z-index 和 display: none 并且不要内联，除非有非常好的理由这样做。演示@fiddle

$("#button").click(function() {
    $(".container").css("opacity", 0.2);
   $("#loading-img").css({"display": "block"});
});

CSS：

#loading-img {
    background: url(http://web.bogdanteodoru.com/wp-content/uploads/2012/01/bouncy-css3-loading-animation.jpg) center center no-repeat;  /* different for testing purposes */
    display: none;
    height: 100px; /* for testing purposes */
    z-index: 12;
}

还有一个demo with animated image。

【讨论】：