title: Iframes loading with progress bar using jQuery?
body: <p>in my job (intranet)- I have an aspx page which has many Iframes ( all ours).</p>
  
  <p>each iframe is being set(js/jquery) by btnX ( there are many buttons in the aspx page... some set src to iframes - some not).</p>
  
  <p><img src="https://i.stack.imgur.com/pjLeh.jpg" alt="enter image description here"></p>
  
  <p><em>notice : the progrssBAr is on the main page...</em></p>
  
  <p>goal : progressBar while iframe is loading...</p>
  
  <p>code :
  ( at first the <code>myPageWrapper</code> is <code>display:none</code>)</p>
  
  <pre><code>$('#myPageWrapper').on ('load','iframe',function () { $("#myProgressBar").hide();});
  </code></pre>
  
  <p>2 problems  :</p>
  
  <ul>
  <li>i can listen to the iframes load finish event. but what about <code>showing</code> the ProgfressBar ?
  i dont want to edit all btn's event "onclick" - is there any centralized solution to this [using jquery]?</li>
  </ul>
  
  <p>i need something that does : </p>
  
  <p><em>"when btn sets the <code>src</code> to an iframe - show <code>myProgressBar</code>"</em></p>
  
  <ul>
  <li>simultaneous events can occur : iframe <strong>A</strong> is being loading for 2 min ( example)  - so it shows the progress bar , <em>meanwhile</em> i pressed other button which sets <code>src</code> to iframe <strong>B</strong>  - which is loading very fast... once its loaded - it hides the ProgressBar ( look at my code) - <strong>but</strong> it shouldnt...<strong>A</strong> didnt finish yet....</li>
  </ul>