Page loading slowly in IE

Question

I am using the colorbox on my site due to this the page is loading very slowly in IE as comparison to other browsers. When I remove the colorbox jQuery file the pages are loading fine. How can I resolve this? I am using the following scripts on my site:

<script src="js/script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">   </script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script> 
<?php if($_GET['s']=="invoices") {?>
   <script src="js/thickbox1.js" type="text/javascript"></script>
<?php } else {?>
   <script src="js/thickbox.js" type="text/javascript"></script>
<?php }?> 
<script src="js/jquery.treeview.min.js" type="text/javascript"></script>
<script src="js/jquery.tipTip.minified.js" type="text/javascript"></script>

Answer 1

You could try defering script execution. This way it would be executed later, when the page is already loaded. Also, you can put it in the end of your HTML document, right before the closing </body> tag. The browser could then render most of the UI and only then load "colorbox".

Answer 2

Here's an option: Load your scripts via JavaScript on DOM ready.

Consider the following:

if (window.addEventListener) { // for non-crappy browsers
  window.addEventListener('load', loadHandler, false);
} else if (window.attachEvent) { // for IE
  window.attachEvent('onload', loadHandler);
}

function loadHandler() {
  var scripts = {
    'scripts': {
      'src': 'js/scripts.js',
      'type': 'text/javascript'
    },
    'jquery': {
      'src': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
      'type': ''
    },
    'colorbox': {
      'src': 'js/jquery.colorbox-min.js',
      'type': 'text/javascript'
    },

    'thickbox1': {
      'src': 'js/thickbox1.js',
      'type': 'text/javascript'
    },
    'thickbox': {
      'src': 'js/thickbox.js',
      'type': 'text/javascript'
    },
    'treeview': {
      'src': 'js/jquery.treeview.min.js',
      'type': 'text/javascript'
    },
    'tipTip': {
        'src': 'js/jquery.tipTip.minified.js',
        'type': 'text/javascript'
    }
  };
  for (var key in scripts) {
    script = document.createElement('script');
    script.src = scripts[key]['src'];
    script.type = scripts[key]['type'];
    document.body.appendChild(script);
  }
}

This way, your scripts will only load when the page is ready.