當用戶點擊某個元素直到頁面加載時顯示加載動畫

我使用了來自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 ...

來源

2013-10-02 testing

我們能看到你的CSS嗎？您正在向正文中添加一個類（奇數），因此效果可能會降低到DOM層次結構。 –

HTML和CSS放置在文檔的末尾。我應該改變它嗎？查看我更新的CSS問題。 – testing

該問題描述在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(); 
});

來源

2013-10-02 09:40:32 testing

當用戶點擊某個元素直到頁面加載時顯示加載動畫

回答

相關問題