在javascript中實現載入中的轉盤

Question

在我的網站上，單擊按鈕后需要彈出一個虛擬的“正在加載”的紡車，一段時間后消失。 這只是一個虛擬頁面。 如果有人可以解釋如何做這樣的事情，我將非常有責任。 我可以使用javascript或jQuery嗎？

提前感謝

Answer 1

在您需要的正確位置放置一個div /圖像，在首次加載頁面時將其隱藏。 喜歡

<input type="button" id="button"/>
  <div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>

並在您的jquery中，為button的click事件設置一個處理程序，以顯示或隱藏div

$(document).ready(function(){
  $('#button').click(function(){
    $('#load').show();
    setTimeout(function() {$('#load').hide()}, 2000);
  });
});

setTimout可用於在一段時間后隱藏div。 在這里檢查工作示例

Answer 2

您可以通過ajax或簡單地通過jquery來實現。

這是ajax的方式

$.ajax({
       type: "POST",
       data: serializedDataofthisform,
       dataType: "html",     /*  or json   */
       url: "your url",
       /*  ajax magic here   */
       beforeSend: function() {
      $('#loaderImg').show();    /*showing  a div with spinning image */
        },
       /* after success  */
       success: function(response) {

       /*  simply hide the image */    
       $('#loaderImg').hide();
       /*  your code here   */
      }
     });

html

<div id="loaderImg"><img src="path" alt=""/></div>

通過超時功能的Javascript ：-setTimeout（）

Answer 3

這是另一個不使用圖像的示例。

// Author: Jared Goodwin
// showLoading() - Display loading wheel.
// removeLoading() - Remove loading wheel.
// Requires ECMAScript 6 (any modern browser).
function showLoading() {
    if (document.getElementById("divLoadingFrame") != null) {
        return;
    }
    var style = document.createElement("style");
    style.id = "styleLoadingWindow";
    style.innerHTML = `
        .loading-frame {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.8);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 4;
        }

        .loading-track {
            height: 50px;
            display: inline-block;
            position: absolute;
            top: calc(50% - 50px);
            left: 50%;
        }

        .loading-dot {
            height: 5px;
            width: 5px;
            background-color: white;
            border-radius: 100%;
            opacity: 0;
        }

        .loading-dot-animated {
            animation-name: loading-dot-animated;
            animation-direction: alternate;
            animation-duration: .75s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        @keyframes loading-dot-animated {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    `
    document.body.appendChild(style);
    var frame = document.createElement("div");
    frame.id = "divLoadingFrame";
    frame.classList.add("loading-frame");
    for (var i = 0; i < 10; i++) {
        var track = document.createElement("div");
        track.classList.add("loading-track");
        var dot = document.createElement("div");
        dot.classList.add("loading-dot");
        track.style.transform = "rotate(" + String(i * 36) + "deg)";
        track.appendChild(dot);
        frame.appendChild(track);
    }
    document.body.appendChild(frame);
    var wait = 0;
    var dots = document.getElementsByClassName("loading-dot");
    for (var i = 0; i < dots.length; i++){
        window.setTimeout(function (dot) {
            dot.classList.add("loading-dot-animated");
        }, wait, dots[i]);
        wait += 150;
    }
};
function removeLoading() {
    document.body.removeChild(document.getElementById("divLoadingFrame"));
    document.body.removeChild(document.getElementById("styleLoadingWindow"));
};