添加加载GIF，以简单的脚本 [英] Adding a loading gif to simple script

问题描述

我真的真的很新的JavaScript，但香港专业教育学院得到这个脚本加载URL的内容，一切工作正常。我叫上一个按钮，一个onClick方法plannerSpin功能，但我将如何去展示一个GIF动画，而这一切是怎么回事？

  VAR XMLHTTP
功能plannerSpin（STR）{
    XMLHTTP = GetXmlHttpObject（）
    如果（XMLHTTP == NULL）{
        警报（浏览器不支持HTTP请求）
        返回
    }
    VAR URL =/食谱/策划人/数据
    xmlHttp.onreadystatechange = stateChanged
    xmlHttp.open（GET，URL，真）
    xmlHttp.send（空）
}
传播stateChanged（）{
    如果（xmlHttp.readyState == 4 || xmlHttp.readyState ==完成）{
        的document.getElementById（recipe_planner_container）。innerHTML的= xmlHttp.responseText
    }
}
传播GetXmlHttpObject（）{
    VAR XMLHTTP = NULL;
    尝试 {
        // Firefox，歌剧8.0+，Safari浏览器
        XMLHTTP =新XMLHtt prequest（）;
    }赶上（五）{
        // IE浏览器
        尝试 {
            XMLHTTP =新的ActiveXObject（MSXML2.XMLHTTP）;
        }赶上（五）{
            XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
        }
    }
    返回XMLHTTP;
}
 

解决方案

有这么多的方法......例如：你可以在图像隐藏的：

 ＆LT; D​​IV ID ='装'风格=显示：无＆GT;＆LT; IMG SRC ='img.gif'＆GT;＆LT; / DIV＆GT;
 

，一旦你开始AJAX请求显示它：

 的document.getElementById（'装'）的style.display =内联。
 

然后，你再隐藏图像，一旦请求已完成：

 如果（xmlHttp.readyState == 4 || xmlHttp.readyState ==完成）{
    。的document.getElementById（'装'）的style.display =无;
    的document.getElementById（recipe_planner_container）的innerHTML = xmlHttp.responseText。
}
 

或者，您可以使用jQuery，原型，Mootools的，或者你想要什么JS库。

再见！

Im really really new to Javascript but Ive got this script that loads the contents of a url and everything works fine. I call the plannerSpin function with an onClick method on a button but how would I go about displaying an animated gif whilst all this is going on?

var xmlHttp
function plannerSpin(str) {
    xmlHttp = GetXmlHttpObject()
    if (xmlHttp == null) {
        alert("Browser does not support HTTP Request")
        return
    }
    var url = "/recipes/planner/data"
    xmlHttp.onreadystatechange = stateChanged
    xmlHttp.open("GET", url, true)
    xmlHttp.send(null)
}
function stateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText
    }
}
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

解决方案

There are so many ways... for example: you can have the image hidden:

<div id='loading' style='display:none'><img src='img.gif'></div>

and show it as soon as you start the AJAX request:

document.getElementById('loading').style.display = 'inline';

Then, you hide the image again once the request has been completed:

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
    document.getElementById('loading').style.display = 'none';
    document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText;
}   

Or, you can use jQuery, Prototype, Mootools, or whatever JS library you want.

Bye!

这篇关于添加加载GIF，以简单的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！