Jquery - Определить Iframe при событии загрузки и скрыть его загрузочный GIF

Question

У меня есть три фрейма на странице HTML. У меня есть условие, когда я загружаю другие два iframe только после загрузки первого iframe. У меня также есть загрузчики (загрузка GIF) перед рендерингом Iframe для всех трех. Код ниже (Iframe также отображается динамически в соответствии с записью в базе данных) ...

HTML

<div class="tab-pane <%= 'show active' if index==1%>" id=<%="#{tab_id}"%>>
  <div class='<%= "loader_#{index}" %>'>
    <div class='visible w-100 text-center' class='loading-spinner'>
      <%= image_tag asset_path('loaders.gif') %>
    </div>
    <div class='text-center loading-report'>
      <%= index == 1 ? "Initializing report" : "Generating .RData" %>
    </div>
  </div>
  <iframe
    id='<%= "r_renderings_frame_#{index}" %>'
    class='<%= "tab_#{index}"%> <%= "other_report_tabs" if index != 1 %>'
    src='<%= "/projects/#{@project.id}/experiments/#{@experiment.id}/r_render?result_id=#{@result['ID']}&tab=#{index}"%>' style="width:100%;height:1000px;border:none">
  </iframe>
</div>

Над кодом работает, и я могу сделать Число фреймов n динамически.

JS

В JS все работает, кроме hideLoader(i). Код ниже ...

$('#r_renderings_frame_1').ready(function() {
      changeLoadingStatus(1);
    }).on('load',function(){
      hideLoader(1);
      for(i=2; i <= window.frames.length; i++){
        let iframe = document.getElementById("r_renderings_frame_" + i);
        console.log("Loading Iframe " + i);
        iframe.src = iframe.src;
        changeLoadingStatus(i);
        $('#r_renderings_frame_' + i).load(function(){
          hideLoader(i);
        }); 
      }
    });

Загрузчик для Iframe 1 скрывается после загрузки. Как я могу обнаружить другую загрузку iframe и скрыть ее загрузчики ... Есть ли какая-либо ошибка в моем JS ?! Любая помощь приветствуется. Заранее спасибо.