i want to know when the images have been loaded in memory

Question

i have this function to create new images to load them in memory

function preloadImgs() {
var imgDomain = "http://imgs.domain/";
if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = imgDomain + "images/1/cover.jpg";
    img2.src = imgDomain + "images/2/cover.jpg";
    img3.src = imgDomain + "images/3/cover.jpg";
} } 

// initialize the function 
preloadImgs()

i need a way to know when all images in preloadImgs() function have been loaded , how can i achive that using the same code that i have provided ?

Possible duplicate of [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) — roberrrt-s, Dec 05 '16 at 13:24
Possible duplicate of [JavaScript Preload Images](http://stackoverflow.com/questions/14867964/javascript-preload-images) — R andom, Dec 05 '16 at 13:24
@Roberrrt its not duplicated, because i am here asking for the callback — Abanoub Samaan, Dec 05 '16 at 13:26
See this answer, it has a callback http://stackoverflow.com/a/38204934 — Tiago, Dec 05 '16 at 13:31

score 0 · Answer 1 · answered Dec 06 '16 at 08:37

You can use a promise pattern.

https://developers.google.com/web/fundamentals/getting-started/primers/promises

Although these aren't natively supported everywhere, jQuery (tagged) provides an implementation:

https://api.jquery.com/promise/

Combined with img.onload to resolve the promises you can respond to an array of promises by:

var arrayOfPromises = [];
var $deferred = $.Deferred();
var img = new Image();
img.onload = function() {
    // Check your support needs @ http://caniuse.com/#search=naturalWidth
    if (img.naturalWidth && img.naturalHeight) {
       $deferred.resolve()
    } else {
       $deferred.reject();
    }
 };
 img.onerror = $deferred.reject;
 img.src = 'someimage.png';

 arrayOfPromises.push($deferred);

 $.when.apply($, arrayOfPromises).then(function() {
   // your callback, images all loaded
   alert('OK')
 }, function() {
   // Any failed image load occur
   alert('FAIL')
 });

i want to know when the images have been loaded in memory

1 Answers1