裝載機但調試

我的CSS時，會顯示：裝載機但調試

.loader1 { 
    background-color: rgba(255, 255, 255, .8); 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 1000; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background-image: url(../Content/images/ezgif-1527767856.gif); 
    background-position: center; 
    background-repeat: no-repeat; 
    display: block; 
}

我的javascript：

function filterme() { 
    $("#loader1").show(); 

    // in between I have a lot of code that takes time to run. 
    $("#loader1").hide(); 
}

我的HTML：

<div class="loader1" id="loader1" style="display:none"></div> 
<button type="button" onclick="filterme()">Click ME</button>

點擊按鈕運行JavaScript很好，但加載程序沒有顯示。

當我使用調試器並檢查它時顯示加載程序。如何在非調試模式下顯示它？

來源

2016-08-04 Himaan Singh

loader1是類名嗎？那麼你需要使用'$（'。loader'）'而不是'（「＃loader1」）'。「＃」用於'id' –

我用你的代碼做了一個jsfiddle並對它進行了一些修改，這對我有用：https://jsfiddle.net/9Lbojrfm/1/ –

你使用的是什麼調試器？你的意思是說，當你的瀏覽器的控制檯處於打開狀態或者某個網頁開發擴展正在運行時，它是有效的？ – moopet

聽起來像這是一個線程問題。瀏覽器忙於運行你的CPU密集型，長時間運行的代碼，它無法在頁面上看到更新內容，然後再隱藏它。

所以，也許這樣的：

function filterme() { 
    $("#loader1").show(); 
    setTimeout(function() { 
     //in between i have a huge code that takes time to run 
     $("#loader1").hide(); 
    }, 10); 
}

也就是說，引進展示#loader1，然後執行的代碼之間的微小的延遲。這爲瀏覽器提供了一個處理UI更新的時刻，然後再深入到密集的東西中。

作爲aisde，不要使用onclick=來創建事件處理程序。在您的JavaScript中，請執行以下操作：

$(document).ready(function() { 
    $('button').click(filterme); 
});

來源

2016-08-04 12:01:54 VoteyDisciple

-1

將你的函數放在document.ready函數之外。

來源

2016-08-04 11:56:27

請解釋這將如何幫助。 – moopet

裝載機但調試

回答

相關問題