Question

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

我想要发生的是......

用户选择新方向（例如风景）
他们看到一个加载gif，比如500ms
虽然他们看到了加载gif，但预览窗口会调整为正确的尺寸
然后新生成的图像显示在预览面板中

以下是来自PrintPreviewer对象的两个片段，它们是问题的核心，updatePreview（）和resizePreviewWindow（）。

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

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");
    }
}

}

Answer 1

我已经找到了我的问题的一些，但我认为我已经以相对迂回的方式完成了它。我不想使用$.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");
    });

});

使用jQuery动画和服务器加载延迟的笨重过渡 - 改进的方法？

1 个答案: