Question

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

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

在jQuery UI对话框中无法正确显示微调器图形

1 个答案: