Pace progress bar only works on tab container refresh

Question

My jquery tabs container has an iframe in each tab. On page refresh, the User's previously selected tab and iframe load up nicely. The iframes in the other tabs load up only when their tab is selected. The problem is that while the Pace progress bar works on page refresh with the first tab, it fails when switching among other tabs where the iframes are loading for the first time. The relevant code is in the lower part of the jquery. I've tried 'forcing' the progress bar with Pace.start, and also wrapping the content, but nothing works. Any help much appreciated. http://jsfiddle.net/p8zhkk8o/

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.10.3/jquery-ui.js
https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js


$(function() {
$(document).ajaxStart(function() { Pace.restart(); });

// Get previously selected iframe
var $panels = $("[id^='Table']").each(function(index) {
    $(this).on('loadContent', function(e) { // 'loadContent' custom event
        // var panel = this;
        var src = $("#RH_TabsTable li a").get(index).rel;
        if (!$(this).find('iframe').length) {
            $(this).html('<div class="tabIframeWrapper"><iframe class="iframetab" width="2000" scrolling="yes" src="' + src + '"></iframe></div>').find('iframe').height($(window).height() - 80);
        }
    });
});

$('#RH_TabsTableShell').tabs({
    'active': window.localStorage.getItem('selectedTab') || 0,
    'activate': function(event, ui) {


// ==============================================
// Pace not working here!!

// Tell the panel to load its content (if not already loaded)
        ui.newPanel.trigger('loadContent');

        window.localStorage.setItem('selectedTab', ui.newTab.index());
    },
    'create': function(event, ui) {

// Tell the initial panel to load its content (if not already loaded).
        ui.panel.trigger('loadContent'); 
    }
});

})




<div id="RH_TabsTableShell">
<ul id="RH_TabsTable" class="nav nav-tabs">
<li><a class="tabref" href="#Table1" rel="https://bing.com">Table1</a></li>
<li><a class="tabref" href="#Table2" rel="https://jsfiddle.net">Table2</a>
</li>
<li><a class="tabref" href="#Table3" rel="https://jqueryui.com/demos/tabs">Table3</a></li>
</ul>

<div id="Table1"></div>
<div id="Table2"></div>
<div id="Table3"></div>
</div>