[AjaxLoader.js]ajax호출 시작 및 종료시 로딩이미지 호출하기

떠돌이개발자Jul 24, 2023

AjaxLoader.js를 테스트해 볼 수 있다.
AjaxLoader.js documentation

AjaxLoader.js documentation

Javascript library for displaying animated waiting indicator without images using symbols such as “|”, “_”, etc. Features: Animation speed can be customized Symbols and their count can be customized Can restore previous state on animation stop Source code

mark-rolich.github.io

ajax호출 후 로딩 이미지로 사용할 수 있는 gif파일을 생성해주는 사이트이다. 상당히 유용하다.
Ajaxload – Ajax loading gif generator

Ajaxload – Ajax loading gif generator

Ajaxload (Beta) <- Hey ! This service is Web 2.0 Preview Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick “Transparent background” if you don’t want one Enter the foreground code

www.ajaxload.info

https://loading.io/

loading.io – Your SVG + GIF + PNG Ajax Loading Icons

Build Your Ajax Loading Icons with SVG / CSS / GIF / PNG !

loading.io

[ajax.js]
function ajaxLoader(el, options, position) {
    // Becomes this.options
    var defaults = {
        bgColor: '#fff',
        duration: 10,
        opacity: 0.7,
        classOveride: false
    }
    this.options = jQuery.extend(defaults, options);
    this.container = $(el);

    this.init = function () {
        var container = this.container;
        // Delete any other loaders
        this.remove();
        // Create the overlay
        var overlay = $('< div>< /div>').css({
            'background-color': this.options.bgColor,
            'opacity': this.options.opacity,
            'width': container.width(),
            'height': container.height(),
            'position': position == null ? 'absolute' : position,
            'top': '0px',
            'left': '0px',
            'z-index': 99999
        }).addClass('ajax_overlay');
        // add an overiding class name to set new loader style
        if (this.options.classOveride) {
            overlay.addClass(this.options.classOveride);
        }
        // insert overlay and loader into DOM
        container.append(
overlay.append(
$ ('< div>< /div >').addClass('ajax_loader')
).fadeIn(this.options.duration)
);
    };

    this.remove = function () {
        var overlay = this.container.children(".ajax_overlay");
        if (overlay.length) {
            overlay.fadeOut(this.options.classOveride, function () {
                overlay.remove();
            });
        }
    }

this.init();
}

function loaderRemove(loader) {
if (loader) loader.remove();
}

[html]
    $(document).ready(function () {
        try {
            var loader;

            $(document).ajaxStart(function () {
                loader = new ajaxLoader($('body'), { opacity: 0.7 }, 'fixed');
            });

            $(document).ajaxStop(function () {
                loaderRemove(loader);
            });

        }
        catch (e) {
        }

});