Question

我在我的网站上使用了颜色框，因为与其他浏览器相比，IE中的页面加载速度非常慢。当我删除colorbox jQuery文件时，页面加载正常。我该如何解决这个问题？我在我的网站上使用以下脚本：

<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

您可以尝试defering脚本执行。这样，当页面已经加载时，它将在稍后执行。此外，您可以将其放在HTML文档的末尾，就在结束</body>标记之前。然后，浏览器可以渲染大部分UI，然后加载“colorbox”。

Answer 2

这是一个选项：在DOM准备好的情况下通过JavaScript加载脚本。

请考虑以下事项：

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);
  }
}

这样，您的脚本只会在页面准备就绪时加载。

页面在IE中加载缓慢

2 个答案: