Skip to content

Instantly share code, notes, and snippets.

@lunalium

lunalium/Preload image background

Created December 27, 2015 14:12
Show Gist options
  • Save lunalium/4601c1f4ef7f0e9e5925 to your computer and use it in GitHub Desktop.
Save lunalium/4601c1f4ef7f0e9e5925 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Preload image background
// Wrapping a function with $() will wait until the page is ready
$(function() {
// Find our target <div>s
var preloader = $('#imagePreloader');
var loadingCover = $('#loadingCover');
var imageCount = 50;
var loadedImages = 0;
// For 1 to 50...
var image;
for (var i = 1; i <= imageCount; i++) {
// Create a new <img>
image = $('<img />', {
src: '/path/to/your/images/' + i + '.jpg'
});
// Add an onload handler for the new image
image.on('load', function() {
if (++loadedImages === imageCount) {
loadingCover.fadeOut();
}
});
// Add the image to the page
preloader.append(image);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment