javascript - 関数がjQueryで完全に実行された後にコードを正しく実行する方法は?

Question

ウィンドウが完全に読み込まれ、関数checkRetinaHeader()が完全に実行されたら、サイトから完全に削除する必要があるフルスクリーン CSS プリローダーを使用しています。このサイトは jQuery v3.1.0 で実行されています。

コードはすべての主要なブラウザーで動作しますが、サイトがまだキャッシュされていない場合、IE11 以下では最初の読み込みで失敗します (エラー: スクリプト 5007: 未定義または null 参照のプロパティ 'style' を取得できません)。その場合、内部のコード.done(function() { ... }は実行されず、CSS プリローダーがロードし続けます。ページをリロードすると、つまりサイトがキャッシュにある場合は機能します。

$(window).on('load', function() {

  // wait until checkRetinaHeader() has been executed
  $.when( checkRetinaHeader() ).done(function() {

    var src = $('.header-section').css('background-image');

    var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

    var img = new Image();

    img.onload = function() {
      removePreloader();
    };

    img.src = url;

    // removes function if background image has been completely loaded
    if (img.complete) img.onload();

  });

});


function checkRetinaHeader() {
   // checks window width and pixel density to load appropriate background image 
}

function removePreloader() {
   // hides fullscreen preloader overlay from document
}

アドバイスをいただければ幸いです。