当对象正在加载时，在innerHTML中显示LOADING

Show LOADING in innerHTML while object is being loaded

本文关键字：innerHTML 显示 LOADING 对象 加载      更新时间：2023-09-26

我有以下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解决方案

再来点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);
}

您可以使用ajax。对此，我的建议是，您必须使用Jquery Ajax。例如,

$("#loadingElement").html("Loading");
$.load("#contacts-container",{},"contacts.php",function(){
  $("#loadingElement").html("");
});
相关文章：