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

Question

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

you want to show message before all image load or after all image load? — Manoj Lodhi
i want after all image load. sorry i was forgot to reply here. because i have some task on that day. btw thx for your attention my friend — plonknimbuzz

Manoj Lodhi Manoj Lodhi · Accepted Answer · 2016-12-15T12:06:42

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() {

}

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

2 Answers