如何設置在自舉模式下將背景圖像動態綁定到div中加載gif

Question

我有一個引導模式。我在div中綁定動態背景圖像。這裏是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，所以當我加載引導模態需要加載背景圖片太多時間到格。所以我想設置加載gif直到背景圖像加載到div。當圖像在div的背景中加載時，gif將停止。如何在bootstrap模式下處理這種情況？

Answer 1

如果我是正確的服務器響應時間的圖像，爲您可以等到服務器響應/ Ajax調用完成後，顯示微調/加載和禁用背景的另一種模式則響應後，當DOM準備就緒後，就可以顯示實際模態。

欲瞭解更多分享實際的代碼。

Answer 2

在這裏我得到了解決方案。

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(); 
     }); 
    }