加載和顯示gif圖像時禁用頁面內容的代碼

任何人都可以幫助我如何在加載和顯示圖像時保持整個頁面處於非活動狀態？我有以下代碼來顯示圖像，但同時頁面加載所有的內容都active.Here的代碼如下：加載和顯示gif圖像時禁用頁面內容的代碼

<body onLoad="init()"> 
    <div id="loading" style="position:absolute; width:100%; text-align:center;top:300px;"> 
    <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 /> 
    </div> 
    <script> 
    var ld = (document.all); 
    var ns4 = document.layers; 
    var ns6 = document.getElementById && !document.all; 
    var ie4 = document.all; 
    if (ns4) 
     ld = document.loading; 
    else if (ns6) 
     ld = document.getElementById("loading").style; 
    else if (ie4) 
     ld = document.all.loading.style; 
    function init() { 
     if (ns4) { 
     ld.visibility = "hidden"; 
     } else if (ns6 || ie4) ld.display = "none"; 
    } 
    </script> 
</body>

下面是示例網站：http://www.bancore.com/

見而加載頁面無效。

來源

2014-10-18 Steve Cohen

這是因爲它們的像素（'＃ LOADI ng' div）覆蓋整個頁面，所以技術上你只能點擊該div而不是任何頁面元素。 – Shomz 2014-10-18 07:21:39

在您的＃加載div您應該使用height: 100%而不是top: 300px，因爲頂部只會從頂部移動300像素，使頁面頂部300像素可點擊。

如果您需要將圖片向下移動300px，您仍然需要將#loading div固定在頂部，但您可以將圖片的頂部邊距設置爲300px。就像這樣：

<div id="loading" style="position:absolute; width:100%; height: 100%; text-align:center;"> 
    <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 style="margin-top:300px;">  
</div>

你也應該避免使用內聯樣式，而只是設定的CSS規則在你的CSS文件：

#loading { 
    position:absolute; 
    width:100%; 
    height: 100%; 
    text-align:center; 
} 

#loading img { 
    margin-top: 300px; 
}

來源

2014-10-18 07:24:20 Shomz

在這種情況下，這個想法是在你的網站上創建一個「面具」，然後在document is ready時將其刪除。

創建CSS：

.loading { 
    position: fixed; // position fixed with height, width = 100% will take over your window 
    width:100%; 
    height: 100%; 
    top : 0; 
    left : 0; 
    text-align : center; 
    background : #ccc; 
    opacity : 0.5; // fade your page. 
    } 
    .loading img { 
    // I'm not good at CSS, so you can find some attribute to center it 
    //check my fiddle for style 
    }

添加到HTML：

<div id="loading" class="loading"> 
     <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0>  
</div>

和Javascript jQuery的文件準備：

$(document).ready(function() { 
    $('#loading').removeClass('loading'); // the `class` loading will be remove 
})

Fiddle here

來源

2014-10-18 07:28:58 Kai

加載和顯示gif圖像時禁用頁面內容的代碼

回答

相關問題