CODEWITHSUNDEEP
jquery
plonknimbuzz
plonknimbuzz

Reputation: 2664

jquery window on load - prevent to display entire page before all background-image is loaded

i read and try every topic that i found, but i dont know why is not working.

i have 5 div with different background-image with large file. here my script.

<!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>

once we run that script, browser will started to alert (alert before dom ready), but browser will immediately alert(dom ready) before my 5 background-images has loaded.

i tried $(window).on('load', function(){}), and $('.box').on('load', function(){}); but both not work for me.

what i want is show loading message/image before all my background-image has loaded

thanks for help

Upvotes: 0

Views: 168

Answers (2)

Manoj Lodhi
Manoj Lodhi

Reputation: 988

You can try following code, Change the urls in array with your urls and write your code (which you want to call after all images) in 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() {

}

Upvotes: 1

Arkej
Arkej

Reputation: 2251

Use ready function

$( 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>

Upvotes: 0

Related Questions