如何在AJAX请求后显示设置时间段内的加载动画

时间:2019-05-23 06:18:08

标签: javascript html css ajax

我遇到了一个问题,我的ajax请求处理得太快而无法显示我的加载图标,我只希望它运行一秒钟左右,我将如何实现这一目标?

HTML:

public void public static void main(String[] args)
{    
    WebDriver driver = null;
     Map<String, String> mobileEmulation = new HashMap<>();
     mobileEmulation.put("deviceName", "Nexus 5");
     //this is just to lauch my browser in mobile view
     ChromeOptions op =  new ChromeOptions();
     op.setExperimentalOption("mobileEmulation", mobileEmulation);

    //this is to ENABLE LogType.PERFORMANCE
    DesiredCapabilities caps = DesiredCapabilities.chrome();
    LoggingPreferences logPrefs = new LoggingPreferences();
    logPrefs.enable(LogType.PERFORMANCE, Level.INFO);
    caps.setCapability(CapabilityType.LOGGING_PREFS, logPrefs);

    //this is to merge your desired capabilties with ChromeOptions (as ChromeDriver(capabilties) is suppressed)
    op.merge(caps); //THIS IS SOMETHING WHICH IS MISSING IN YOUR CODE

    //this is just to instantiate the driver and lauch my application
    driver = new ChromeDriver(op);
    driver.get("https://m.snapdeal.com/");

    //this is just to make you know user number of logs with LogType as PERFORMANCE
    List<LogEntry> entries = driver.manage().logs().get(LogType.PERFORMANCE).getAll();
    System.out.println(entries.size() + " " + LogType.PERFORMANCE + " log entries found");


    //as the request and response will consists HUGE ammount of DATA so I will be write it into text file for reference
    for (LogEntry entry : entries) 
    {
        try 
        {
            FileWriter f = new FileWriter("pathOfYourFileWhereYouWantToWriteYourData", true);
            BufferedWriter bufferedWriter = new BufferedWriter(f);

            String data =  (new Date(entry.getTimestamp()) + " " + entry.getLevel() + " " + entry.getMessage()).toString();

            bufferedWriter.write(data);
            bufferedWriter.write("\n"+"@@@@@@@@@@"+"\n\n");
            bufferedWriter.close();
        } catch (IOException e) 
         {
            e.printStackTrace();
         }
    }

 }

JS:

<img class="loader" id="loader" src="Social_Icons/loader.svg" alt="Book Loader Icon">

CSS:

$(document).on('click','#sub',function(e) {
    function showLoading(){
        document.getElementById("loader").style = "visibility: visible";
    };
        function hideLoading(){
        document.getElementById("loader").style = "visibility: hidden";
    }
        showLoading();
      var data = $("#text").serialize();
      $.ajax({
             data: data,
             type: "post",
             url: "processing.php",
             success: function()
             {
                 hideLoading();
                 alert("success");
             },
             error: function()
              {
                  hideLoading();
                  alert("save failed");
              }
            });
     });

任何帮助都是太棒了! :)

1 个答案:

答案 0 :(得分:2)

您可以在JS中添加1秒钟的超时-在隐藏加载程序之前。请参见下面的代码:

setTimeout(function () {
        hideLoading();
    }, 1000);