0

我使用了来自How can I create a "Please Wait, Loading..." 使用 jQuery 动画的 Jonathan 的示例？. 我不使用 AJAX 调用。相反，我使用这个触发事件：

$("body").addClass("loading");
$("#select-place input").click(function(){
    $("body").addClass("loading");
});
$(window).bind("load", function() {
    $("body").removeClass("loading"); 
});

第一行当用户点击我的输入元素时，我得到了 FF24 中的动画图标。但在 IE10 中，图标不会旋转。我做错了什么？我试图预加载图像，但这并没有改变任何东西。

CSS：

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background-color: rgba( 255, 255, 255, .8 ) ;
    background-image: url(../images/design/loading.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.80;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80)
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

HTML：

<div class="modal"></div>

为什么图标 (gif) 不旋转？到目前为止，我已经测试了所有浏览器，它可以在 IE 中运行...

4

1 回答 1

0

IE 停止中的动画 GIF 中描述了该问题。IE 普遍存在问题（甚至 IE10）。解决方案是使用spin.js。对于屏幕中间的居中，我使用了这个解决方案。

HTML：

<div id ="center" style="position:fixed;top:50%;left:50%"></div>

JS：

var opts = {
  lines: 13, // The number of lines to draw
  length: 8, // The length of each line
  width: 4, // The line thickness
  radius: 11, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('center');
var spinner = new Spinner(opts);

$("#select-place input").click(function(){
    spinner.spin(target);
});
$(window).bind("load", function() {
    spinner.stop();
});
于 2013-10-02T09:40:32.737 回答