0

jQuery を使用して "Please Wait, Loading..." アニメーションを作成するにはどうすればよいですか? の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 に答える