等待，直到由.html（）加載的內容準備好

我有一個頁面，我使用jquery .get()方法加載內容和.html()將它們顯示在我的頁面上。在加載過程中，我有一個帶有位於頁面上方的預加載器的div盒，以隱藏彈出的新元素，而是顯示一個gif。雖然有些頁面需要很長時間才能加載，因爲其中包含iframe，圖片等。現在我只希望preloader div在所有內容完全加載後都被刪除，這是我無法找到答案的地方，因爲沒有.html()回調函數。我試過,.on()負載作爲事件，.done()功能在.get()方法，但似乎沒有任何工作，因爲我想要它。等待，直到由.html（）加載的內容準備好

當我的ajax div的內容加載完成時，有沒有什麼機會可以找到，所以我可以刪除preloader？

編輯
這是我的HTML標記

<div class="wrapper"> 
<div class="ajax_cont"> 
<!-- The content will come in here --> 
</div> 
<div class="preloader"></div> 
</div>

也許我沒有解釋的問題不夠清晰，所以這裏是我的js代碼，以及：

function load_ajax(linktofile) { 
    $(".preloader").fadeIn(200); 

    setTimeout(function() { 
     $.get("ajax/" + linktofile, function(data){}).done(function(data) { 

      var content = $(data).filter('#loaded_content').html(); 

      $(".ajax_cont").html(content); //It takes a while until all pictures, which were included in content, are fully loaded in .ajax_contnt   

      setTimeout(function() { 
       $(".preloader").fadeOut(200); //I want this to be executed only when everything is fully ready 
      }, 150); 

     }); 
    }, 200);  
}

我我添加了一些評論來澄清，我的意思是什麼。

來源

2015-06-07 LL1997

'.done（）'不會火，直到你的Ajax完成後。 – sharf

可以在問題中包含'html'？ – guest271314

將預加載器放入要替換的html中，因此在完成時，ajax調用將替換預加載器 –

-1

試試這個

jQuery(document).ready(function($){ 
    // assuming .loader is a button/link to load content 
    // and .preloader is the window (overlay) that will show while content is being loaded 
    $('.loader').click(function(){ 

    // fadein 
    $('.preloader').fadeIn(200); 

    // load content 
    $('.ajax_cont').load("ajax/" + linktofile,function(){ 

     // use jquery's **:last** to wait for the last image to load then fadeout 
     $('.ajax_cont img:last').on('load',function(){ 
      $('.preloader').fadeOut(200); 
     }); 

    }); // ajax_cont load 
    }); // loader click 
}); // document ready

來源

2015-06-07 15:45:55

不幸的是，這不起作用！ – LL1997

等待，直到由.html（）加載的內容準備好

回答

相關問題