我正在嘗試編寫一些網頁onload（）事件的代碼，我想等待網頁出現，直到所有圖像都顯示加載在網頁上。我發現這一點：如何在加載所有圖像後加載HTML主體
onLoad event for loading all images
但它並不完全如預期或工作的是我，誰不知道如何使用它....
所以，這是最好的方式使用onload事件來等待所有的圖像被加載或者你推薦另一個？
我想要在這個網站上預載圖像：The link。地圖圖片更大，所以它的持續時間比正確的要長。但它不能小，因爲它是透明的圖像...所以我決定在顯示完整的網頁後預載所有圖像。但仍然不能......任何想法？
考慮在文檔上使用Jquery和加載事件。更多信息here document load event vs ready
我不明白，結果你想要什麼，但如果你想加載<body>標籤，你可以使用JavaScript加載之前的某些圖像：
<script type="text/javascript">
var image1=new Image()
image1.src="pathway to image"
var image2=new Image()
image2.src="pathway to image"
</script>
如果你把這個JS的<head>標記，那麼這些圖片將在正文之前加載。只需使用變量（在此示例中爲image1和image2），而不是正常的HTML <img>標記。
您應該使用$（窗口）.load（）而不是$（文件）。就緒（）
如果我理解正確的你，這是我會怎麼做，我會添加一個'加載div'來隱藏html內容，並且在加載所有圖像時我會刪除該div。不僅顯示加載消息和/或加載指示符更加優雅，而且比在圖像之後實際加載頁面更容易。這意味着您在圖像完成後動態地創建和加載內容，您需要做更多的工作。
2）然後，我會選擇所有的圖像，並添加一個簡單的函數，他們的onload事件，將增加載入圖像的數量，並調用一個函數，檢查是否所有的圖像加載。如果所有的圖像都加載了，我會刪除加載div，這就是全部。
下面是一些工作代碼（減去圖像，你需要自己添加它們）。基本上，而不是與圖像的div你應該有自己的html代碼，之前或之後（儘管如此），添加'loading div'（請記住，我的CSS風格，它不是好的做法）
<!doctype html>
<html>
<head>
<script>
window.onload = function() {
var images = document.getElementsByTagName('img'),
totalImages = images.length,
imagesLoaded = 0,
img;
function checkForLoaded() {
if(imagesLoaded === totalImages) {
var loadingDiv = document.getElementById('loadingDiv');
loadingDiv.parentNode.removeChild(loadingDiv);
}
}
for (var i = 0; i < totalImages; i++) {
img = new Image();
img.onload = function() {
imagesLoaded++;
checkForLoaded();
}
img.src = images[i].src;
}
}
</script>
</head>
<body>
<div id="content">
<img src="0001.jpg">
<img src="0002.jpg">
<img src="0003.jpg">
<img src="0004.jpg">
<img src="0005.jpg">
<img src="0006.jpg">
<img src="0007.jpg">
<img src="0008.jpg">
<img src="0009.jpg">
<img src="0010.jpg">
</div>
<div id="loadingDiv" style="height:2000px; width: 2000px; position: absolute; top: 0px; left: 0px; background-color: #FFFFFF">
loading
</div>
</body>
</html>
你期望得到什麼結果？你究竟想要什麼？ – Toping
只有在所有圖像加載後才顯示html頁面？如果是這樣，我不確定這是一個非常好的主意，但我想我知道它可以做什麼 – BBog
@Bog，是的，我知道這不是最好的主意，但不幸的是，這就是我需要的...... – Sonhja