bulletproof ajax:ajax 载入时显示动画
2012-09-01 14:22 youxin 阅读(291) 评论(0) 编辑 收藏 举报The simplest format for this kind of image is an animated GIF
file. The exact image can be anything you like, as long as it features
a smoothly looping animation. Rotating shapes, spinning
arrows, and barbershop-pole progress bars are all popular conventions
for indicating activity.
Here’s a short function called displayLoading. It takes a single argument,
which is an element in the document. This element is first emptied by removing
all of its child nodes. Then, a newly created img element is appended.
function displayLoading(element) { while (element.hasChildNodes()) { element.removeChild(element.lastChild); } var image = document.createElement("img"); image.setAttribute("src","loading.gif"); image.setAttribute("alt","Loading..."); element.appendChild(image); }
Now I can update the contact details example to use this function. I want to
execute it at the same time that I’m starting the Ajax request in the grabFile
function:
function grabFile(file) { var request = getHTTPObject(); if (request) { displayLoading(document.getElementById("details")); request.onreadystatechange = function() { parseResponse(request); }; request.open("GET", file, true); request.send(null); return true; } else { return false; } }
When a name is clicked, a GIF animation appears in the “details” div,which is where that person’s details will appear.
Once the Ajax call is successfully completed, the loading image is obliterated
by the use of innerHTML in the parseResponse function:
function parseResponse(request) { if (request.readyState == 4) { if (request.status == 200 || request.status == 304) { var details = document.getElementById("details"); details.innerHTML = request.responseText; } } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步