jQuery 使 Internet Explorer 崩溃答案

【问题标题】：jQuery crashing Internet ExplorerjQuery 使 Internet Explorer 崩溃
【发布时间】：2012-05-25 03:51:10
【问题描述】：

好吧，基本上，我正在设计和开发一个相当复杂的网站，它围绕着 jQuery 的使用。我对 jQuery 的了解真的很差，这是我第一次正确使用它。我之前在这里发布了一个关于脚本的问题，显然它很糟糕，但我并没有向你展示我实际编写它的目的，我现在可以......因为我已经将它上传到了一个测试目录。它现在可以在 IE 以外的所有浏览器中正常工作。 CSS 样式已经到了那里，它应该很快就会完成！但是，Internet Explorer 出现了严重的问题。在 IE 7,8 中，它看起来不错，但是当您将鼠标悬停在链接上时，它会立即崩溃。 IE 6，显示似乎根本无法正常工作。但 IE 6 的问题较小。

如果您只需要 5 或 10 分钟来重写一个可能需要我 10 小时的简单脚本，我将非常感激！继承人的网站 - http://openyourheart.org.uk/test/index.html

如果需要，我可以发送所有压缩的文件。

提前谢谢你。

布拉德利

【问题讨论】：

继承 Javascript - openyourheart.org.uk/test/scripts/functions.js继承 css - openyourheart.org.uk/test/style.css
万一有人对点击链接感到紧张，我决定冒险一试，一切似乎还好...
只是一个可以大大减少代码的快速提示，您可以组合选择器，例如：$(".squareleft3, .squareright").hide(); 这将隐藏两者...此外，您可以分配多个类，例如class="class1 class2"...所以如果你想在任何地方隐藏所有包含class2 的内容，不管其他类，$(".class2").hide()。此外，您可以使用带逗号的选择器重写这些 if，如下所示：if ($(".whoweare:first, .squareleft3:first, .squareright:first").filter(":visible").length > 0).... 更短:) 先做这些事情，然后您的代码将很容易解析。
谢谢尼克，这太棒了。我会继续努力的。
它在我的最后报告错误'对象没有属性或方法'

标签： jquery internet-explorer

【解决方案1】：

你应该在你的页面上做很多事情。

1) 对于生产，始终使用缩小版的 jQuery。更好的是，使用来自 google 等 CDN 的 jQuery，这样 jQuery 已经缓存在客户端浏览器中的机会就会增加，并且加载时间会减少。

现在你的 jquery 是 160kb，而不是在你的标题中使用它：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2) 滑动面板 (http://www.openyourheart.org.uk/test/scripts/jquery.slidingpanels.js) 给出 404 - 检查您的脚本是否位于正确的位置。

3) 现在有 8 个 HTTP 请求只针对 JavaScript。您可以放入一个文件和 minifiy(YUI Compressor) 的 javascript 越多越好。每个 Javascript 都会加载，并且会阻止其他所有内容加载到您的页面上，直到加载为止，因为这些都在顶部。整个页面将需要很长时间才能加载。

在 firefox 中使用 Firebug(Net tab) Addon 之类的工具来查看正在加载的文件数量以及它们的大小。

4) 我认为图片还有变小的空间（一张 facebook 黄色图片为 500kb - 您的背景为 1.3MB - Love Hurts 为 590KB）您在 3 张图片之间有 2 MB - 想象一下某人通过拨号连接尝试访问您的站点。
无论如何，您的背景没有太多细节 - 在 Photoshop 中，如果质量下降到 6-8，我认为不会有太大的不同。

5) 其他较小的图像可以制作成 PNG 并缩小，它们的尺寸会大幅缩小。对于 PNG 文件，您可以使用 OptiPNG 等实用程序来减小 png 图像的大小——我认为特定图像（facebook）一旦制作为 png 并缩小，应该低于 25kb 范围。

6) 考虑对您的网页进行 GZip 压缩。

我还没有在 IE 中看到这一点，因为网站本身有很多基本应该改变的地方。一旦你优化了你的网站，我认为它可以在 IE 中工作，除非你的 JavaScript 存在特定的 IE 相关问题（提示，请查看插件文档以了解已知的 IE 相关问题）。

较高的加载时间对 SEO 不利，而且 google 已将加载时间视为 SEO 参数。在 firefox Firebug 中，您可以安装一个名为 YSlow 的插件！这将帮助您跟踪您可以做的其他事情。

【讨论】：

这与崩溃无关。
-1 表示完全错过主题，+1 表示努力... -0 我猜 :)

【解决方案2】：

在对崩溃进行深入调查后，我发现实际上只有两个盒子导致了崩溃。在体验脚本时，我发现淡入图像导致了它，如果我把它们拿走，它工作得很好。 Sooo，我寻找了图像淡入的div之间的差异，发现崩溃的盒子有一个ID和一个类..这似乎影响了它？！我删除了 ID，只留下了“空白方块”类，它没有崩溃。

原创 -

<div id="row1square2" class="blank square">
  <div class="square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>

新版本-

<div class="blank square">
  <div class="row1square2 square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>

我不知道为什么这会产生影响，但该网站非常接近完成和即将到来，非常感谢您的所有帮助和 cmets，我已尝试实施并继续处理您的建议。我确实有另一个问题，我似乎无法解决，所以我在这里将它作为一个新问题发布..

Hide horizontal scrollbar in IE 7 and below

再次感谢，布拉德利

【讨论】：