Question

我阅读并尝试了我发现的每个主题，但我不知道为什么不起作用。

我有5个div与不同的背景图像和大文件。在这里我的剧本。

＆＃13;

<!doctype html>
<html><head>
<title>test</title>
<!--<link rel="stylesheet" href="style.css">-->
<style>
*{
	padding:0;
	margin:0;
}
.box{
	width:20%;
	border:1px solid #000;
	box-sizing: border-box;
	height:100vh;
	float:left;
	background-position: 50% 50%;
	background-repeat:no-repeat;
	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">
	<div class="box bg1"></div>
	<div class="box bg2"></div>
	<div class="box bg3"></div>
	<div class="box bg4"></div>
	<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() {
	alert('dom ready');
	$('.loading').hide();
	$('.container').show();
	
});

</script>
</body></html>

＆＃13;

一旦我们运行该脚本，浏览器将开始提醒（在dom准备好之前发出警报），但浏览器将在我的5个背景图像加载之前立即发出警报（dom ready）。

我尝试了$（窗口）.on（＆＃39;加载＆＃39;，功能（）{}）和$（＆＃39; .box＆＃39;）。on（＆＃39; load＆＃ 39;，function（）{}）;但两者都不适合我。

我想要的是在我的所有背景图片加载之前显示加载消息/图像

感谢您的帮助

Answer 1

您可以尝试使用以下代码，使用您的网址更改数组中的网址，并在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() {

}

Answer 2

使用ready功能

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

<!doctype html>
<html><head>
<title>test</title>
<!--<link rel="stylesheet" href="style.css">-->
<style>
*{
	padding:0;
	margin:0;
}
.box{
	width:20%;
	border:1px solid #000;
	box-sizing: border-box;
	height:100vh;
	float:left;
	background-position: 50% 50%;
	background-repeat:no-repeat;
	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">
	<div class="box bg1"></div>
	<div class="box bg2"></div>
	<div class="box bg3"></div>
	<div class="box bg4"></div>
	<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');
	
$( document ).ready(function() {
    alert('dom ready');
	$('.loading').hide();
	$('.container').show();
});

</script>
</body></html>

加载jquery窗口 - 阻止在加载所有背景图像之前显示整个页面

2 个答案: