在加载对象时显示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("");

});