jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />

<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
	.bg {
		background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
	}
</style>
<div class="bg"></div>

<div id="loadingProgress"></div>

JavaScript

let backgroundImageArray = [];

	function backgroundLoading(i) {

		let loadCount = 0;

		let img = new Image();
		$(img).on('load', function () {

			if (i < backgroundImageArray.length) {

				loadCount = parseInt(((100 / backgroundImageArray.length) * i));
				backgroundLoading(i + 1);

			} else {

				loadCount = 100;
				// do something when the page finished to load all the images
				console.log('loading completed!!!');
				$('#loadingProgress').append('<div>loading completed!!!</div>');

			}

			console.log(loadCount + '%');
			$('#loadingProgress').append('<div>' + loadCount + '%</div>');

		}).attr('src', backgroundImageArray[i - 1]);

	}

	$(document).ready(function () {

		$('*').each(function () {

			var backgroundImage = $(this).css('background-image');
			var putInArray = false;

			var check = backgroundImage.substr(0, 3);

			if (check == 'url') {

				backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
				backgroundImage = backgroundImage.replace('"', '');
				backgroundImage = backgroundImage.replace('"', '');

				if (backgroundImage.substr(0, 4) == 'http') {
					backgroundImage = backgroundImage;
				}
				putInArray = true;

			} else if ($(this).get(0).tagName == 'IMG') {

				backgroundImage = $(this).attr('src');
				putInArray = true;

			}

			if (putInArray) {
				backgroundImageArray[backgroundImageArray.length] = backgroundImage;
			}

		});

		backgroundLoading(1);

	});