Question

我使用了来自How can I create a "Please Wait, Loading..." animation using 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浏览器之外它还能正常工作......

Answer 1

问题在Animated GIF in IE stopping中描述。一般来说IE存在问题（甚至是IE10）。解决方案是使用spin.js。对于屏幕中间的居中，我使用了this solution.

<强> 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();
});

当用户单击元素直到页面加载时显示加载动画

1 个答案: