Question

我试图制作一个GIF加载器，只要我的AJAX请求正在处理就会显示。我正在使用jquery loader plugin。

问题是，当浏览器忙于处理AJAX请求时GIF不会移动，虽然它正在移动，但为了测试目的将其设置为visible。我已在3个主流浏览器中测试过它。

这是我的代码的摘录。当然，真正的代码要复杂得多：

  $("#myButton").click(function() {
    $.loader({
      className: "blue-with-image-2",
      content: ''
    });

    getData();
  });

  function getData() {
    $.ajax({
      type: "GET",
      url: "https://jsonplaceholder.typicode.com/photos",

      success: function(data) {
        // do something with data
        console.log(data)
        $.loader('close'); // close the loader
      },
      error: function(jqXHR, status, error) {
        console.error(status, error);
      }
    });
  }

Here is a fiddle with that example code

有趣的是，在jsFiddle中测试这个特定代码时，确实如此工作即可。但不是我真正的代码，几乎相同，但更复杂。

Answer 1

在ajax调用中使用'beforeSend'函数

@Entity
public class Address {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    @Column
    private String street;

    @Column
    private String city;

    @OneToOne
    private Department department;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public Department getDepartment() {
        return department;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "Address [id=" + id + ", street=" + street + ", city=" + city + "]";
    }
}

加载AJAX时，Loader-GIF不会移动

1 个答案: