Question

每当调用ajax请求时，我都会尝试加载游标。但是光标所在的任何其他元素将停止显示加载图标的光标。添加！important似乎没有任何区别。如何使光标加载到每个悬停的元素上？

// cursor loading function
function start_request() {
$('body').css("cursor", "progress");
}

function end_request() {
$('body').css("cursor", "auto");
}


$('.new_filter_button').click(function(){ // when a feature button is selected
var serialize = $('#new_header_filters').serialize(); // takes all the values of the filter
$.ajax({
    beforeSend: start_request(),
    type : 'POST',
    url  : 'http://localhost/carprice/ajax/new-filters.php', 
    data : serialize,
    dataType : 'json',
    success : function(data) {
        $("#new_results_toolbar").html(data.toolbar);
        $("#new_results").html(data.models);
        retain_css();
        end_request();
    }
}); 
});

Answer 1

为了回答你的问题，我建议你设置样式，使用！important，然后使用这些样式而不是添加css内联。我没有对此进行测试，但相信它会起作用。

<style>
  .inProgress {
    cursor:progress!important;
  }
</style>

然后在你的代码中添加并删除它：

function start_request() {
    $('body').addClass('inProgress');
}

function end_request() {
    $('body').removeClass('inProgress');
}

但是，我建议另一种方法是使用css插件，它将为您显示进度指示器，并通过在所有内容之上放置div来阻止用户进行交互。然后，您可以包含一个漂亮的进度指示器。

Answer 2

您不仅需要在body标签上添加和删除“inProgress”类，还需要在每个预定义游标的标签上添加和删除。在我的网站上，我在我的网站中为标签和按钮设置了指针游标。所以我也在所有这些元素上添加和删除inProgress类。您可能还需要为图像执行此操作，如果其中任何一个具有css样式，声明当您将鼠标悬停在它们上方时显示哪个光标。

如何在调用ajax时创建加载光标图标

2 个答案: