オブジェクトがロードされている間にinnerHTMLにLOADINGを表示

Question

次のJavaScript関数は、contacts.phpによってDIV id contacts-containerに内容を読み込みますが、タスクを完了するまでに多くの時間がかかります。内容がロードされている間、DIV id contacts-containerに "LOADING .."というテキストを表示したい。

function load_contacts() { 
    document.getElementById("contacts-container").innerHTML='<object type="text/html" data="contacts.php" ></object>'; 
} 

純粋なJavaScriptのソリューションが必要です。

Answer 1

JSについてさらに教えてください。

function load_contacts() { 
    var el = document.createElement("object"), 
     target = document.getElementById("contacts-container") 

    target.innerHTML = "<span>Loading...</span>"; 

    el.onload = function() { 
     target.firstChild.remove(); 
    } 

    el.setAttribute("type","text/html"); 
    el.setAttribute("data","contacts.php"); 
    target.appendChild(el); 
} 

Answer 2

あなたはajaxで行うことができます。この私の提案には、Jquery Ajaxが必要です。たとえば、

$("#loadingElement").html("Loading"); 

$.load("#contacts-container",{},"contacts.php",function(){ 

    $("#loadingElement").html(""); 

});