如何将背景图像动态绑定的加载gif设置为引导模式的div
如何将背景图像动态绑定的加载gif设置为引导模式的div
提问于 2015-09-28 05:18:36
我有一种鞋带模式。我将动态背景图像绑定在div中。下面是引导模态
<div id="ImageTagModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div id="jobImage" class="modal-content">
</div>
</div>
</div>这是我的javascript代码。
function image(src)
{
$('#jobImage').css("background-image", "url("+src+")");
$('#jobImage').css("background-size", "cover");
$('#ImageTagModal').modal();
}现在，我的图像大小将是MB，所以当我加载引导模式时，将背景图像加载到div中需要花费太多的时间。所以我想要设置加载gif直到背景图像加载到div。当图像加载在div的背景中时，gif将停止。如何在引导模式中处理此场景？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-28 05:31:09
如果我对它的服务器响应时间是对映像的，那么您可以等到服务器响应/ajax调用完成后，显示另一个旋转/加载和禁用后台的模式，然后在DOM准备好之后，您可以显示实际的模式。
有关更多共享实际代码的信息。
Stack Overflow用户
发布于 2015-09-29 12:00:58
我找到解决办法了。
function image(src)
{
$('#loader').show(); //This is my gif image
$('<img/>').attr('src', src).load(function() {
$('#jobImage').css("background-image", "url("+src+")");
$('#jobImage').css("background-size", "cover");
$('#ImageTagModal').modal();
$('#loader').hide();
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32816108
复制相关文章
相似问题
腾讯云开发者
