Preloading images in HTML
Solution 1:
Try utilizing $.Deferred() , .queue()
var images = ["http://lorempixel.com/1200/800/cats/"
, "http://lorempixel.com/1200/800/nature/"
, "http://lorempixel.com/1200/800/animals/"
, "http://lorempixel.com/1200/800/technics/"
];
// do stuff when image loaded
var loadImage = function loadImage(elem) {
return $(elem).fadeTo(500, "1.0", "linear");
};
// load images
var loadImages = function loadImages(urls, image, complete) {
// `this` : `document`
urls.forEach(function(imageSrc, i) {
var img = new Image;
var dfd = new $.Deferred();
// return `this` : `document`
dfd.then(function(ready) {
loadImage(ready);
return this
}, function(error) {
console.log(error)
})
.always(function() {
console.log(complete, urls.length);
return urls.length === complete
? $(this)
.data("complete", complete + " images loaded")
.dequeue("images") // when all images loaded
: this
});
// log errors
img.onerror = dfd.reject;
img.onload = function(e) {
complete = this.complete ? ++complete : complete;
dfd.resolveWith(document, [
image.eq(i).prop("src", this.src)
]
);
};
img.src = imageSrc
});
// return `this` : `document`
return this
};
$(window).load(function() {
// init `loadImages`
var complete = 0;
// call `loadImages`,
// `this` context : `document`
loadImages.call(document, images, $(".image"), complete)
});
$(document).ready(function() {
// notify when all images loaded
$(this).queue("images", function() {
console.log($(this).data())
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">Solution 2:
This never actually appends anything to the DOM, I used an array to keep references of the created images, and pass them to an optional callback
var paths = [
"img/1.jpg",
"img/1a.jpg",
"img/1b.jpg",
"img/1c.jpg"
];
preloadImages(paths);
function preloadImages(paths, callback) {
var images = [];
var loaded = 0;
paths.forEach(function (path) {
var img = new Image();
img.src = path;
img.onload = onImagePreloaded;
images.push(img);
});
function onImagePreloaded() {
loaded++;
if (loaded === paths.length && callback) {
callback(images);
}
}
}