javascript - 上传网站时如何在 MVC 页面上结束/停止 JQuery Loader

Question

我正在开发一个 JQuery + MVC ASP.not 页面。

我在我的页面上添加了一个 Loader，它运行良好。

我现在正在尝试的是加载程序现在应该在网站上传时停止。

请在顶部调用加载程序函数下方找到我的当前代码:-

JS (JQuery) Code:-
<script src="../js/jquery-1.8.2.min.js"></script>
<script>
        $(function () {

            $(window).load(function () {
                $.loader({
                    className: "blue-with-image",
                    content: 'Please wait... We are requesting the information!'
                });
            });

        });
</script>
<script>
/*
 * jQuery Loader Plugin
 * @version: 2.0.0
 * @requires jQuery v1.2.2 or later
 * @author : ${author}
 * @see : ${demoURL}
 * Small loader
 * usage : $.loader();
 * $.loader(options) -> options =
 *  {
 *      
 * }
 *
 * To close loader : $.loader("close");
 *
 */
var jQueryLoaderOptions = null;
(function($) {
    $.loader = function (option) {
        switch(option)
        {
            case 'close':
                if(jQueryLoaderOptions){
                    if($("#"+jQueryLoaderOptions.id)){
                        $("#"+jQueryLoaderOptions.id +", #"+jQueryLoaderOptions.background.id).remove();
                    }
                }
                return;
            case 'setContent':
                if(jQueryLoaderOptions){
                    if($("#"+jQueryLoaderOptions.id)){
                        if(arguments.length == 2)
                        {
                            $("#"+jQueryLoaderOptions.id).html(arguments[1]);
                        }else{
                            if(console){
                                console.error("setContent method must have 2 arguments $.loader('setContent', 'new content');");
                            }else{
                                alert("setContent method must have 2 arguments $.loader('setContent', 'new content');");
                            }
                        }   
                    }
                }
                return;
            default:
                var options = $.extend({
                    content: "Please wait... We are requesting information from MedCenter!",
                    className:'loader',
                    id:'jquery-loader',
                    height:60,
                    width:200,
                    zIndex:30000,
                    background:{
                        opacity:0.4,
                        id:'jquery-loader-background'
                    }
                }, option);
        }
        jQueryLoaderOptions = options;
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        var bgDiv = $('<div id="'+options.background.id+'"/>');
        bgDiv.css({
            zIndex:options.zIndex,
            position:'absolute',
            top:'0px',
            left:'0px',
            width:maskWidth,
            height:maskHeight,
            opacity:options.background.opacity
        });

        bgDiv.appendTo("body");
        if(jQuery.bgiframe){
            bgDiv.bgiframe();
        }
        var div = $('<div id="'+options.id+'" class="'+options.className+'"></div>');
        div.css({
            zIndex:options.zIndex+1,
            width:options.width,
            height:options.height
        });
        div.appendTo('body');
        div.center();
        div.html(options.content);
        //$(options.content).appendTo(div);
    };
    $.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.outerHeight() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.outerWidth() ) / 2+$(window).scrollLeft() + "px");
        return this;
    };
})(jQuery);

==============================================

CSS

#jquery-loader{
    text-align: center;
    }
#jquery-loader-background{ background-color: #fefefe;}
#jquery-loader.blue-with-image{
    text-align: center;
    background-image: url(Images/icons/loadingBig.gif);
    background-position: center center;
    background-repeat: no-repeat;
    padding: 35px 0 155px 0;
    font-weight: bold;
    width: 500px !important;

}

#jquery-loader.blue-with-image-nodisplay {
    display: none;
}

================================

JQuery + MVC 代码，我在从服务器获取信息后“尝试”结束加载程序:-

<script>
    $(function () {
        //Set the hubs URL for the connection
        $.connection.hub.url = "@Model.ProvisioningHubUrl/signalr";

        // Reference the auto-generated proxy for the hub.  
        var chat = $.connection.provisioningHub;
        // Create a function that the hub can call back to display messages.
        chat.client.setCaSalNumbers = function (cameras) {
            // Add the message to the page. 
            $('#list').append('<li><strong>Pickhead Camera:</strong> ' + htmlEncode(cameras.pickheadCaSalNumbers) + '</li>');
            $('#list').append('<li><strong>Processing Station Top Camera:</strong> ' + htmlEncode(cameras.processingStationTopCaSalNumbersr) + '</li>');
            $('#list').append('<li><strong>Processing Station Side Camera:</strong> ' + htmlEncode(cameras.processingStationSideCaSalNumbersr) + '</li>');
            $('#list').append('<li><strong>Card Scan Camera:</strong> ' + htmlEncode(cameras.cardScanCaSalNumbers) + '</li>');
            $('#pickheadImage').attr("src", "data:image/jpg;base64," + cameras.pickheadCameraBase64Image);
            $('#processingStationSideImage').attr("src", "data:image/jpg;base64," + cameras.processingStationSideCameraBase64Image);
            $('#processingStationTopImage').attr("src", "data:image/jpg;base64," + cameras.processingStationTopCameraBase64Image);
            $('#cardScanImage').attr("src", "data:image/jpg;base64," + cameras.cardScanCameraBase64Image);
            $('#getCameraSerialNumbers').attr("disabled", false);

            $.loader({
                className: "nodisplay",
                content: ''
            });
        };
    });
</script>

Answer 1

非常感谢!您的解决方案对我有用。 我刚刚替换了我以前的代码:-

            $.loader({
                className: "nodisplay",
                content: ''
            });

使用 "$.loader('close');"

它的工作原理。 :-)

谢谢