javascript - 如何在 Bootstrap 模式中将背景图像动态绑定(bind)到 div 时设置加载 gif

Question

我有一个 Bootstrap 模式。我在 div 中绑定(bind)动态背景图像。这是 Bootstrap 模式

<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 为单位，因此当我加载 Bootstrap 模式时，将背景图像加载到 div 中需要花费太多时间。所以我想设置加载 gif 直到背景图像加载到 div 中。当图像加载到 div 的背景中时，gif 将停止。如何在 Bootstrap 模式中处理这种情况？

Answer 1

如果我对它的图像服务器响应时间是正确的，那么你可以等到服务器响应/ajax 调用完成，显示另一个微调器/加载模式并禁用背景，然后在 DOM 准备好响应后，你可以显示实际模态。

更多分享实际代码。