加載jquery窗口 - 防止在加載所有背景圖像之前顯示整個頁面

我閱讀並嘗試找到每個主題，但我不知道爲什麼不工作。加載jquery窗口 - 防止在加載所有背景圖像之前顯示整個頁面

我有5個div與不同的背景圖像與大文件。這裏是我的腳本。

<!doctype html> 
 
<html><head> 
 
<title>test</title> 
 
<!--<link rel="stylesheet" href="style.css">--> 
 
<style> 
 
*{ 
 
\t padding:0; 
 
\t margin:0; 
 
} 
 
.box{ 
 
\t width:20%; 
 
\t border:1px solid #000; 
 
\t box-sizing: border-box; 
 
\t height:100vh; 
 
\t float:left; 
 
\t background-position: 50% 50%; 
 
\t background-repeat:no-repeat; 
 
\t background-size:cover; 
 
} 
 
.bg1{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Kenai-desktop.jpg"); 
 
} 
 
.bg2{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Hawaii-desktop.jpg"); 
 
} 
 
.bg3{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/de0b954d-ca76-41d3-ac3a-900c6bc25139.jpg"); 
 
} 
 
.bg4{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Bryce-desktop.jpg"); 
 
} 
 
.bg5{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Tortugas-desktop.jpg"); 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div class="loading">LOADING</div> 
 
<div class="container" style="display:none"> 
 
\t <div class="box bg1"></div> 
 
\t <div class="box bg2"></div> 
 
\t <div class="box bg3"></div> 
 
\t <div class="box bg4"></div> 
 
\t <div class="box bg5"></div> 
 

 
</div> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script> 
 
alert('alert before dom ready'); 
 
$(function() { 
 
\t alert('dom ready'); 
 
\t $('.loading').hide(); 
 
\t $('.container').show(); 
 
\t 
 
}); 
 

 
</script> 
 
</body></html>

一旦我們運行該腳本，瀏覽器將開始提醒（前DOM已準備就緒警報），但瀏覽器會立即發出警告之前，我5背景影像（DOM就緒）已加載。（'load'，function（）{}）; $（window）.on（'load'，function（）{}）和$（'。box'）。但都不適合我。

我想是顯示加載消息/圖像之前我所有的背景圖片加載

感謝您的幫助

來源

2016-12-15 plonknimbuzz

想在所有圖片加載之前或所有圖片加載之前顯示消息嗎？ –

我想要所有的圖像加載。對不起，我忘記了在這裏回覆。因爲那天我有一些任務。順便說一句，你的注意力我的朋友 – plonknimbuzz

你可以嘗試下面的代碼，使用你的url改變數組中的urls，然後在callThisAfterAllImages中寫下你的代碼（你想在所有圖片之後調用）。

function loadUrls(imgSrc, callBackAfterCheck) { 
    var img = new Image(); 
    img.onload = function() { callBackAfterCheck(img) }; 
    img.src = imgSrc; 
} 

var urlArray = [{bgImage:'url1'},{bgImage:'url2'},{bgImage:'url3'},{bgImage:'url4'}]; 


var imageIndex = 0; 
function callBackAfterCheck(img){ 
    imageIndex++ 
    $('.bg'+imageIndex).css('background-image', 'url(' + img + ')'); 
    if(imageIndex < urlArray.length){ 
    var imageUrl = urlArray[imageIndex].bgImage; 
    loadUrls(imageUrl, callBackAfterCheck) 
    }else{ 
    callThisAfterAllImages(); 
    } 
} 

var imageUrl = urlArray[imageIndex].bgImage; 
loadUrls(imageUrl, callBackAfterCheck); 

function callThisAfterAllImages() { 

}

來源

2016-12-15 12:06:42

1.沒有優雅方法來處理這個2.你的黑客真棒，謝謝^ _^/ – plonknimbuzz

使用ready功能

$(document).ready(function() { 
    console.log("ready!"); 
});

<!doctype html> 
 
<html><head> 
 
<title>test</title> 
 
<!--<link rel="stylesheet" href="style.css">--> 
 
<style> 
 
*{ 
 
\t padding:0; 
 
\t margin:0; 
 
} 
 
.box{ 
 
\t width:20%; 
 
\t border:1px solid #000; 
 
\t box-sizing: border-box; 
 
\t height:100vh; 
 
\t float:left; 
 
\t background-position: 50% 50%; 
 
\t background-repeat:no-repeat; 
 
\t background-size:cover; 
 
} 
 
.bg1{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Kenai-desktop.jpg"); 
 
} 
 
.bg2{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Hawaii-desktop.jpg"); 
 
} 
 
.bg3{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/de0b954d-ca76-41d3-ac3a-900c6bc25139.jpg"); 
 
} 
 
.bg4{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Bryce-desktop.jpg"); 
 
} 
 
.bg5{ 
 
background-image: url("https://artsandculture.withgoogle.com/gcs/national-parks-service/en-us/Asset-Tortugas-desktop.jpg"); 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div class="loading">LOADING</div> 
 
<div class="container" style="display:none"> 
 
\t <div class="box bg1"></div> 
 
\t <div class="box bg2"></div> 
 
\t <div class="box bg3"></div> 
 
\t <div class="box bg4"></div> 
 
\t <div class="box bg5"></div> 
 

 
</div> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script> 
 
alert('alert before dom ready'); 
 
\t 
 
$(document).ready(function() { 
 
    alert('dom ready'); 
 
\t $('.loading').hide(); 
 
\t $('.container').show(); 
 
}); 
 

 
</script> 
 
</body></html>

來源

2016-12-15 11:53:20 Arkej

減慢你的互聯網連接或使大量複製'http://domain.com/image.png?'（防止瀏覽器使用舊緩存）你會知道這是行不通的。順便說一句，thx爲您的答覆。 – plonknimbuzz

據我所知，實際上$（function（）與$（document）.ready一樣。CMIIW – plonknimbuzz

@plonknimbuzz你說得對。我的錯誤 – Arkej

加載jquery窗口 - 防止在加載所有背景圖像之前顯示整個頁面

回答

相關問題