title: Onload method is calling itself more than once on successive reloads to application (var image = new Image(), javascript issue)
body: <p>I don't understand why onload method(see the code below) is calling itself more than once in IE8 and IE9 browsers on consecutive reloads.</p>
  
  <p>I guess, onload method is fired more than once that is causing this image to <code>render(appear)</code> more than once in <strong>IE8,IE9</strong>. Below js code is written by my senior Front-Ender (he is using his own written js library for all <code>.append()</code>, <code>anim()</code>, ... methods). The code is working as expected in Firefox, Chrome but the <code>image(html code)</code> is rendering more than once while reloading with a IE8 or IE9 browser.</p>
  
  <p>Some Quick Info: </p>
  
  <ul>
  <li><code>waitingFor()</code> - Periodically scans dom for matching elements,</li>
  <li><code>mdiTog</code> - The image that is appearing more than once..</li>
  </ul>
  
  <p>How it works:</p>
  
  <p>The <code>div</code> attribute <code>Class="suggestions contextSuggesions"</code> is inserted in the <code>body</code> element and contains an unordered list (<code>ul</code>, <code>li</code>, <code>ul</code>) that toggles between opacity <code>0</code> and <code>1</code> if you click on the image (<code>mdiTog</code>).</p>
  
  <p>Below is the image of <code>Mditog</code> appearing more than once and it's appearance is random:</p>
  
  <p><img src="https://i.stack.imgur.com/QYBJo.png" alt="enter image description here"></p>
  
  <pre class="lang-javascript prettyprint-override"><code>    waitingFor('.viewport .homePage', function () {
      var mdiTog = new Image();
      mdiTog.onload = function () {
          var $mdi = M$('.mdiTabs ul'),
              $contextMenu = M$($body.append('&lt;div class="suggestions contextSuggesions" style="display:none"&gt;&lt;/div&gt;')),
              $toggle = M$($mdi.append('&lt;li class="mdiTog" style="display:none"&gt;&lt;/li&gt;')),
              visible = false,
              active = false;
  
          var hideCtx = function () {
              if (visible) {
                  $contextMenu.anim('', {opacity: 100}, {opacity: 0}, 250, function () {
                      $contextMenu.css({display: 'none'});
                  });
                  visible = false;
              }
          };              
  
          $toggle.css({opacity: 0, display: 'inline-block'}).anim('', {opacity: 0}, {opacity: 100}, 1000).on('click', function () {
              var togOS = $toggle.offset(),
                  menu = '';
  
              M$('li', $mdi.get()).each(function (el, idx) {
                  if (idx &gt; 1) {
                      menu += '&lt;li rel="' + idx + '"&gt;' + $mdi.text(null, el) + '&lt;/li&gt;';                   
                  }
              });
  
              $contextMenu.css({opacity: 0, display: 'block', top: togOS.top + 'px', left: (togOS.left - 20) + 'px'}).anim('', {opacity: 0}, {opacity: 100}, 400, function () {
                  visible = true;
              }).html('&lt;ul&gt;' + menu + '&lt;li class="uiUtil hr" onclick="ApolloUI.widgets.expose.show()"&gt;' + translate('previewAll') + '&lt;/li&gt;&lt;li class="uiUtil" onclick="ApolloUI.mdi.closeAll()"&gt;' + translate('closeAll') + '&lt;/li&gt;&lt;/ul&gt;');
          });
  
          $contextMenu.on('click', function (e) {
              var target = $contextMenu.eventTarget(e);
  
              if (target.tagName === 'LI' &amp;&amp; target.className.indexOf('uiUtil') === -1) {
                  $contextMenu.fire('click', M$('.mdiTabs li').get(parseInt(target.getAttribute('rel'), 10)));
              }
              hideCtx();              
          }).on('mouseleave', function () {
              active = false;
          }).on('mouseenter', function () {
              active = true;
          });
  
          setInterval(function () {
              if (!active &amp;&amp; visible) {
                  hideCtx();
              }
          }, 1000);
      };
      mdiTog.src = 'media/img/ico_16_context.png';
  });
  </code></pre>
  
  <p>I do have to close this issue as soon as possible, so any suggestions/modifications/addition in this code to force onload to execute only once on even on several consecutive reloads in IE8/IE9 browsers are welcome.</p>