簡單的onclick頁面加載器

我在HTML中創建了這個非常基本的啓動頁面，其中包含引用網站的圖像。在用戶點擊圖片後是否有添加加載程序的方法，然後加載程序在網站出現時就會消失？我試圖讓用戶在網站加載時看一些東西。以下是我使用的示例href行。簡單的onclick頁面加載器

<a href="https://Website.com"><img border="0" alt="Image" src="logo.gif"></a>

我在網上發現了這個onclick腳本，但我不知道如何將它添加到我的啓動頁面。誰能幫我把這些放在一起？我應該在哪裏放置'onclick =「myFunction（）？」'謝謝！

onclick="myFunction()" 

<script> 
var myVar; 

function myFunction() { 
myVar = setTimeout(showPage, 3000); 
} 

function showPage() { 
document.getElementById("loader").style.display = "none"; 
document.getElementById("myDiv").style.display = "block"; 
} 
</script>

來源

2017-03-01 kcd

新頁面是不是替換當前頁面？您在問題中顯示的定位點似乎是指向另一個網頁/網站的標準鏈接。如果是這樣，你不需要擔心隱藏任何「加載...」圖像，它會在當前頁面卸載時自動消失。 – nnnnnn

這裏是你需要的東西的例子。

單擊按鈕時將顯示加載程序，並在網站加載後消失。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 

 
$(document).ready(function(){ 
 
    var myVar; 
 
$("#myDiv").click(function() { 
 
    \t myFunction(this); 
 
}); 
 

 
function myFunction(div) { 
 
$("#loader").toggle(); 
 
$(div).toggle(); 
 

 
} 
 

 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<a id="myDiv" href="https://Website.com">Click me</a> 
 
<div id="loader" style="display:none;background:green;padding:150px">This is a loader</div> 
 

 

 
</body> 
 
</html>

Here is a working DEMO

來源

2017-03-01 05:31:29 Sravan

您的代碼段不起作用。當您使用jQuery綁定點擊處理程序時，不需要內聯'onclick'屬性。 – nnnnnn

@nnnnnnn，'在HTML中的OnClick'被忽略，但我的代碼片段工作正常。你甚至可以檢查DEMO。 – Sravan

當然，現在你已經編輯它。你爲什麼超時？新頁面將替換當前頁面，因此不需要手動隱藏加載程序，並且無論如何，如果在固定時間後隱藏加載程序，用戶可能會在加載其他頁面之前幾秒鐘內沒有任何內容。 – nnnnnn

你可以參考下面的鏈接，它正確地解釋，它是如何得來完成。 http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript

來源

2017-03-01 05:44:06

只有鏈接的答案在堆棧溢出時不被接受，但在任何情況下，OP都不會嘗試加載圖像，它們似乎正在加載（或導航到）另一個頁面。 – nnnnnn

簡單的onclick頁面加載器

回答

相關問題