使用jQuery动画和服务器加载延迟的笨拙转换-改进方法？

我有一个预览工具，当用户选择一个方向时，重新布置屏幕，使其具有更宽（横向）或更高（纵向）的预览窗口，其中包含生成的图像

我希望发生的是

• 用户选择新方向（例如横向）
• 他们看到一个加载的gif，比如500毫秒
• 当他们看到正在加载的gif时，预览窗口将调整到正确的尺寸
• 然后，新生成的图像将显示在预览面板中

下面是问题的核心部分PrintPreviewer对象的两个片段updatePreview（）和resizePreviewWindow（）

问题是这两个函数都试图使用css（）方法将新的背景图像插入#预览区域。当我试图在resizePreviewWindow（）中将加载gif添加到步骤中时，不幸的是，加载gif从未显示。因此，我现在选择在下面暂时删除预览背景图像。我需要这样做，因为如果旧的bg图像在生成新的（正确的比率）图像时仍保留在预览面板中，那么当resizePreviewWindow（）函数执行其工作时，它在大约200毫秒内看起来非常奇怪

A） 作为一种为用户切换方向的方式，这已经让人感觉相当笨拙。虽然这是可行的，但我觉得需要一些整理和干燥，并希望得到一些指导

B） 我希望能够在updatePreview（）指向/prints/preview的服务器时使用加载gif？并显示在预览面板中，同时获取新生成的图像并将其流式传输到位

var PrintPreviewer = {

    init: function () {
        var data = this.cleanForm();

        this.updatePreview(data);
        this.selectBoxUpdate();
        this.changeColor();
        this.changeTextarea();
        this.changeStyle();
    },

    // removed some code for clarity

    updatePreview: function (data) {
        var preview = $('#preview')
        preview.fadeIn('slow', function() {
            preview.attr('preview-preface', '');
            preview.css("background-image","url('/prints/preview?"+data+"')");
            console.log(data);
        });
    },

    //removed some code for clarity

    resizePreviewWindow: function (elem) {
    // when user selects new orientation put correct shape window
    var prevSurr = $('#previewSurround');
    var prev = $('#preview');

    switch (elem.val()) 
    {
    case 'landscape':
        prevSurr.removeClass("portrait square").addClass("landscape");
        prev
            .css({
            "background-image": "none",
            })
            .animate({
            height: "380px",
        }, 100); 
        break;
    case 'portrait':
        prevSurr.removeClass("landscape square").addClass("portrait");
        prev
            .css({
            "background-image": "none",
            })
            .animate({
            height: "540px",
        }, 100); 
        break;
    case 'square':
        prevSurr.removeClass("portrait landscape").addClass("square");
        prev
            .css({
            "background-image": "none",
            })
            .animate({
            height: "420px",
        }, 100); 
        break;
    default:
        console.log("hi");
    }
}

}

我已经解决了一些问题，但我认为我是以一种相对迂回的方式解决的。我不想使用

$.ajax（）

方法，但最终还是求助于它来获得想要的效果。但是，我只能让加载的GIF在页面加载时工作，而不是在用户自己启动updatePreview（）函数时。仍然在寻找一个可靠的答案来解释为什么会这样

    var PrintPreviewer = {

    init: function () {
        var data = this.cleanForm();
        this.updatePreview(data);
    },

    updatePreview: function (data) {

        var preview = $('#preview')
        var url = "/prints/preview?"+data

        PrintPreviewer.loadContent(url);

    },

    loadContent: function(href) {

      $.ajax({
        url: href,
        success: function (data) {
          $("#preview")
                        .css("background-image","url('"+href+"')")
                        .attr('preview-preface', '');
        }
      });
      },


        // removed code for brevity

    resizePreviewWindow: function (elem) {
        // when user selects new orientation put correct shape window
        var prevSurr = $('#previewSurround');
        var prev = $('#preview');

        switch (elem.val()) 
        {
        case 'landscape':
            prevSurr.removeClass("portrait square").addClass("landscape");
            prev
                .css({
                "background-image": "none",
                })
                .animate({
                height: "380px",
            }, 100); 
            break;
        case 'portrait':
            prevSurr.removeClass("landscape square").addClass("portrait");
            prev
                .css({
                "background-image": "none",
                })
                .animate({
                height: "540px",
            }, 100); 
            break;
        case 'square':
            prevSurr.removeClass("portrait landscape").addClass("square");
            prev
                .css({
                "background-image": "none",
                })
                .animate({
                height: "420px",
            }, 100); 
            break;
        default:
            console.log("hi");
        }
    }

}

$(document).ready(function() {

    $('#preview').ajaxStart(function(){
       $(this).addClass("loading").attr('preview-preface', '');
    });

    $('#preview').ajaxComplete(function(){
       $(this).removeClass("loading");
    });

});