javascript - 当 jquery 将附加 html 获取到页面时显示加载图标

Question

我正在使用 jquery 通过基于表单变量的 php 获取 html 搜索结果表，并将其加载到 div 中。由于查询可能需要一些时间，我想显示某种形式的加载动画，但不确定如何将其集成到我的 jquery 中。

这是我的代码:

$(function() {
    $('#search_form').submit(function() {
        var data = $("#search_form :input").serializeArray();
        $('#results-panel').addClass('panel-primary');
        var model_id = data[0];
        $("#results").html('');
        $.get("/search/find_products/"+model_id.value, function (data) {
             $("#results").append(data);
        });
        return false;
    });
});

我对 jquery 还很陌生，所以这段代码可能不是最有效的方法。任何建议将不胜感激。

Answer 1

使用 .show() 和 .hide() 非常简单。

$(function() {
    $('#search_form').submit(function() {
        $('#myLoader').show();
        var data = $("#search_form :input").serializeArray();
        $('#results-panel').addClass('panel-primary');
        var model_id = data[0];
        $("#results").html('');
        $.get("/search/find_products/"+model_id.value, function (data) {
             $("#results").append(data);
             $('#myLoader').hide();
        });
        return false;
    });
});