Issue with deferreds and .load

Question

I'm trying to write a simple thing but I'm not able to do it...

I have dictionary with selectors as keys and file to load as value. I want to iterate this dictionary and load the files. And once everything is loaded, do something.

var loadDictionary = { '#myDiv1': 'file1.html', '#myDiv2': 'file2.html' };

var deferreds = [];
for (const [key, value] of Object.entries(loadDictionary)) {
    var def = $.Deferred();
    $(key).load(value, function() {
        def.resolve();
    });
    deferreds.push(def);
}
$.when(...deferreds).then(function() {
    // Everything is loaded :-)
});

Is there something wrong with my 'def' variable being 'shared' in the for loop? It's loading everything but I never arrive in the the .then() method.

Thanks for any help!