c# - 微调器图形在 jQuery UI 对话框中未正确显示

Question

我试图显示一个带有微调器 GIF 的 jQuery UI 对话框。最初是用 HTML 静态编码的 GIF：

<div id="LoadingDiv" style="display:none; text-align: center">
    <img alt="Loading..." src='/Content/images/ajax-loader.gif' />
</div>

但是，IE 中存在一些已知问题，这些问题会阻止 GIF 图像在 jQuery UI 对话框中正确设置动画。所以我采取了动态地将一个img元素附加到div元素：

$("#FilterForm").submit(function (){
    $("#LoadingDiv").html($("<img>").attr({ 
        'id':'spinner', 
        'alt':'Loading...',
        'src': '@Url.Content("~/Content/images/ajax-loader.gif")'
    }));
    $("#LoadingDiv").dialog("open");
});

这给系统带来了一些奇怪的错误。提交表单时，有时会显示 GIF，有时则不会。有人可以帮忙吗？

Answer 1

通过使用Spin.js实施解决方法来解决。不需要 GIF 和更好的跨浏览器兼容性。

编码：

$("#FilterForm").submit(function (){
    var opts = {
        top: '10px',
        left: '50px',
        length: 2,
        width: 3,
        radius: 7
    };
    var loadingDiv = document.getElementById("LoadingDiv");
    var spinner = new Spinner(opts).spin(loadingDiv);

    $("#LoadingDiv").dialog("open");
});