顯示加載程序塊/圖像加載程序，同時提取內容

但是我們啓動了一個模式窗口，它直接啓動。模態的內容從我們的dB中提取數據，並且需要大約3秒鐘才能加載。

我想要做的是將整個內容包裝在一個加載器div中。

我認爲是正確的術語...

所以：

< DIV ID = 「主要內容」> 等等...等等...等等... </DIV>

變爲... < DIV CLASS = 「內容加載器」>

< div id="main content" > 
    blah ... blah ... blah ... 
</div>

</DIV>

我相信，我們不得不解僱一個開放的事件，併成功close事件......（我不是專家的js，你可以告訴）

正在讀：http://malsup.com/jquery/block/

我沒有得到的是，我們的代碼不會通過ajax獲取。它是通過查詢

所以我們應該如何設置這個... 如果我們沒有loader.gif，我們不會感到困擾。

也許是覆蓋了50％，50％位於加載消息模態的全尺寸..

我收集這種工作方式是網頁不知何故監測活動，並在活動完成裝載消息消失。

好的，所以很好，但是......我遇到的一個問題是，我們可能會從第三方網站的圖像中抽取，因此加載程序肯定會等待該ping成功。我們可以改變什麼，其實裝載機是高興...即只用HTML，等等等等

任何例子將是巨大的歡呼聲

來源

2011-06-04 422

如果你不介意使用這個插件，你可能有一個看看jquery-loading，這使得整個過程如下：

$.loading({ 
    onAjax: true, 
    align: 'center', 
    img: 'jquery-loading/loading.gif', 
    mask: true 
});

這假設你使用標準的jQuery AJAX函數（$.ajax(),$.get()等），你聲稱你不是。如果不是通過AJAX（一個iframe，可能？）在模式窗口中加載查詢，我有點困惑，但如果需要，您可以刪除onAjax:true參數並手動調用$.loading()以啓動覆蓋+微調器，然後在完全加載內容時致電$.loading(false)。在這種情況下，您需要通過偵聽'load'事件或通過爲您返回HTML調用函數來加載內容時執行回調函數。

編輯：關閉，如果您使用的是iframe中加載動畫的最簡單方法是將回調附加到iframe的load事件使用jQuery：

$('#my_iframe').load(function() { 
    $.loading(false); 
});

來源

2011-06-04 03:56:57 nrabinowitz

對不起，很忙CSS這件事情。是的，基本上我們啓動一個模式，並在其中加載一個iframe，以便我們可以添加js和css，以顯示客戶端vCard。我只是沒有聽到聽衆的事件，我有這些偉大的想法，但沒有能力。我們的程序員在週一回來後會向他們展示您的代碼，我希望能夠完成...並且看起來很聰明！何哼哈哈歡呼 – 422 2011-06-04 05:27:38

看我的編輯 - 這很簡單。 – nrabinowitz 2011-06-04 06:21:11

好，我管理它到底，並認爲我會分享代碼。這僅適用於我們的用法，因此您需要根據您的頁面修改CSS。

好的CSS：

#loading-container {position: absolute; top:50%; left:50%;} 
#loading-content {width:600px; text-align:center; margin-left: -300px; height:50px; margin-top:-25px; line-height: 50px;} 
#loading-content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; } 
#loading-graphic {margin-left: 280px; margin-bottom:-2px;} 
#loading {background-color: #eeeeee; height:100%; width:100%; overflow:hidden; position: absolute; left: 0; top: 0; z-index: 99999;}

略低於< body>標籤我說：

<div id="loading"> 

    <script type = "text/javascript"> 
     document.write("<div id='loading-container'><p id='loading-content'>" + 
         "<img id='loading-graphic' width='16' height='16' src='images/ajax-loader.gif' /> " + 
         "Loading...</p></div>"); 
    </script> 

</div>

，略高於</body>標籤我說：

<!-- LOADING SCRIPT --> 
<script> 
$(window).load(function(){ 
    $("#loading").fadeOut(function(){ 
     $(this).remove(); 
     $('body').removeAttr('style'); 
    }); 
}); 
</script> 
<!-- LOADING SCRIPT -->

很顯然，我們使用jquery庫，以便加載你的。圖片loading.gif的路徑取決於您的網站。

希望這可以幫助任何人在加載內容時尋找簡單的頁面加載器圖形。

Ste

來源

2011-06-05 02:23:52 422

顯示加載程序塊/圖像加載程序，同時提取內容

回答

相關問題