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

Question

我试图显示一个 jQuery UI 对话框，里面有一个微调 GIF。最初在 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");
});