扩展 jquery load() 函数以在 div 中显示微调器

Question

有没有办法改变 .load 行为，以便在任何正在加载数据的 div 中加载微调器？

例子

<div class='content lside'></div>
<script>
    $(document).ajaxStart(function() {
        $('body').append('<div class="notice" style="position:fixed;top:40%;left:30%;z-index:99999;"id="loadingspin">loading</div>');       });
    $(document).ajaxStop(function() {
        $('#loadingspin').fadeOut().remove();
    });
    $('.content').load("<?=base_url();?>booking/<?=$day?>");
</script>

我使用上面的脚本。

但我真正想要的是，当 ajaxstart 时，$('.content') 的内容会被 spinner 替换，直到它完成加载新内容。

所以有没有办法我可以扩展 .load 以自行完成并替换 ajaxstart， 所以只要 $(div).load() 被调用，$(div).html('spiner'); 就会被触发。

如果没有，有没有办法 .ajaxstart 可以引用内容将被加载到的 div ？

请注意： 我目前在我所有网页的标题脚本中使用 .ajaxstart 和 .ajaxstop 来处理一般显示微调器，但我想用 div 特定解决方案替换它/扩展它这仍然可以在任何页面上工作，而无需进一步编辑每个 ajax 请求。

谢谢

Answer 1

可能这样的事情应该可以解决问题。覆盖 jQuery 的原型并保存旧函数。

(function(){
    var oldLoad = jQuery.fn.load;
    jQuery.fn.load = function( url, data, complete ){
        /*
         * do your stuff
         */
        oldLoad.call( jQuery, url, data, complete );
    }
})();

这会更改整个页面的全局可用jQuery.load() 方法，因此即使其他脚本调用该方法，也应该执行“你的东西”，至少在你重新定义该函数被解析之后。