代码之家 › 专栏 › 技术社区 › CMPalmer

有人想解决Internet Explorer上的“剩余n项”问题吗?

jquery-ui internet-explorer css jquery asp.net

CMPalmer · 技术社区 · 17 年前

在我的ASP.NET应用程序中,它的javascript和jquery很重,但也使用了母版页和.NET Ajax片段,我一直在IE 6的状态栏上看到消息“2 items remaining”或“15 items remaining”,然后是“loading”。 somegraphicsfile.png_gif “这条消息永远不会消失,可能会阻止,也可能不会阻止某些页面功能的运行(当然,它似乎陷入了困境,但我并不乐观)。

我只需刷新.aspx年龄,就可以使99%的时间发生这种情况,但是项目的数量和它所提到的文件有时会有所不同。通常是2、3、12、13或15。

我在谷歌上搜索了答案,有几个建议或解释。他们中的一些人没有为我们工作,而另一些人对我们实施或尝试并不实际。

以下是一些想法/理论:

IE缓存的图像不正确,因此它会反复请求相同的图像,如果图像在页面上重复,服务器会假定应该在本地缓存它,因为它已经在该页面上下文中提供了该图像。IE正确地显示图像,但会等待永远不会出现的服务器响应。通常,它所说的正在等待的文件会在页面上重复出现。
页面正在使用具有透明度的PNG图形。的确如此,但它们是jquery ui主题的滚轴生成的图形,据jquery ui的人说,这些图形是IE安全的。jQueryUI组件是使用PNG的唯一工具。如果这有帮助的话,我们所有的png引用都是css。我已经把一些图形从PNG改成了GIF,但也很可能是在等待 somegraphicsfile.png 照原样 somegraphicsfile.gif文件
图像是在CSS和/或JavaScript中指定的,但在当前未显示的内容上(例如显示:无项目)。这个可以是的,但如果是这样的话,我会认为预加载图像是可行的,但是到目前为止,添加预加载程序并没有任何好处。
IIS的缓存策略会混淆浏览器。如果这是真的,那么只有微软服务器软件在微软的浏览器上有问题(这一点也不让我吃惊)。不幸的是,我对将托管应用程序的IIS配置没有太多控制权。

有人看到了这一点并找到了一种方法来对抗它吗?尤其是在带有jquery和jquery用户界面的ASP.NET应用程序上?

更新

另一个数据点:在至少一个页面上,仅仅注释jquery ui datepicker组件设置会导致问题消失,但我不认为(或者至少我不确定)这是否修复了所有页面。如果它真的“修复”了它们,我就不得不换掉插件,因为这个功能需要存在。目前IE6/7上的jquery用户界面似乎没有任何未解决的问题…

更新2

我检查了IIS设置,“启用内容过期”是不在我的任何文件夹上设置。取消选中该设置是解决此问题的常见建议。

我有另一个更简单的页面,我可以一直在上面创建错误。我正在使用jquery ui 1.6rc6文件(尽管我也尝试过使用相同结果的jquery ui 1.7.1)。只有在刷新包含jquery ui日期选择器的页面时才会出现问题。如果我对datepicker设置进行注释,问题就消失了。当我这样做时,我注意到以下几点:

此页面始终显示“正在下载图片”http:///images/calendar“schedulehs.gif”,但仅在重新加载时显示。
当我查看HTTP日志时,我看到它每次动态打开时都从服务器请求该映像,而不考虑缓存。
该图形的所有请求都已完成,并正确返回图形。没有标记代码200或304(表示服务器告诉IE使用缓存版本)。为什么在所有的请求都完成后等待图形,我不知道。
页面上有一个其他图形(其中一个ui png文件)的代码为304(未修改)。在另一个页面上,我成功地记录了“还剩2个项目”的HTTP流量,两个不同的图形文件(两个ui-png)也有304个(但都没有被列为“下载”)。
这个错误不是无害的-页面没有完全响应。例如,如果我单击其中一个应该执行客户端操作的按钮,页面将刷新。
离开页面返回不会产生错误。
我已将脚本和脚本引用移动到内容的底部,这不会影响此问题。不过,脚本仍在$(document.ready()中运行(除非我必须这样做,否则它太毛毛了,无法拆分)。

最终更新和回答

下面有很多好的答案和建议,但这些都不是我们的问题。最近的一个(也是引导我找到解决方案的一个)是关于长时间运行的javascript的,所以我奖励了那里的赏金(我想我可以自己回答,但我宁愿奖励导致解决方案的信息)。

我们的解决方案是:在$(document).ready脚本中包含来自ASP.NET母版页的多个jqueryui日期选取器。在这个客户机页面上,一个本地脚本的$(document).ready事件有一个脚本,它在某些条件下销毁了日期选择器。我们必须使用“destroy”,因为以前版本的datepicker存在“disable”问题。当我们升级到jquery ui(1.7.1)的最新版本,并将日期选择器的“destroy”s替换为“disable”s时,问题就消失了(或者大部分都消失了——如果在加载页面时做得太快,仍有可能获得“n items remaining”状态)。

我的理论是这样的:

页面内容加载并具有12或所以带有日期选取器的文本框班级。
母版页脚本创建这些文本框上的日期选择器。
IE为每个请求排队独立日历图形因为我不知道怎么做正确缓存动态图像请求。
在处理请求之前, 客户端区域脚本销毁那些日期选择者所以图形不再需要。
我只剩下一些孤立的请求知道该怎么办。

8 回复 | 直到 15 年前

Mitchel Sellers 17 年前

我以前也遇到过类似的问题,这是由于页面中间有一个运行时间很长的JS块,浏览器在等待它完成执行之后才会完成下载站点的附加文件。

我不确定这是否是你的问题,但它以类似的方式表现出来。

scunliffe 17 年前

如果在代码中的任何地方使用行为(或使用的库),例如

<style>
  body * {
    behavior:url(anyfile.htc);
  }
</style>

然后有无解我知道的和 bug report filed in IE Feedback on Connect 对于IE8(和IE7),这两个版本都被拒绝,但有以下笼统的屏蔽声明:

这是IE中的已知错误,在以前的IE版本中也会发生。你为什么在状态栏中看到数百个请求是因为IE试图读取HTC文件对于页面上的每个元素,一次又一次地从磁盘返回。不幸的是,此时我们不打算修这个。我们将在将来的IE版本中考虑这一点。

最好的问候, IE Team

因为这是IE7开发收到的相同回复,所以我不会屏息以待。曾经把这个修好。

更新:

一个基于更新笔记的额外想法。如果页面没有很好的响应,就好像它仍在加载某些内容一样,请检查呈现的DOM内容是否有任何对 document.write() 您可能没有添加它们,但lib可能有。

如果它们存在,请尝试添加 document.close(); 语句完成后,这将告诉浏览器您“完成”了渲染。

ps这里有一个链接,你可以保存为书签(右键单击“添加到收藏夹…”),它将显示生成的dom,如ie所见(一个丑陋的quoteless=camelcasemess),对结果进行搜索,以找到任何可能导致问题的奇怪代码。

IE生成的源代码:(添加这个作为书签的位置,编辑器不会让我链接它)

javascript:'<xmp>'+window.document.body.parentNode.outerHTML+'</xmp>';

Atanas Korchev 17 年前

我已经用过 this 在过去取得了巨大的成功。你也可以查一下 this 博客帖子。

John Rasch 17 年前

关于缓存图像,我必须使用HTTP处理程序来正确地缓存图像。具体来说,在CSS菜单中有一个箭头的图片,它将导致您处理的确切行为,因为它在每个菜单中使用了多次。

下面是处理程序的代码: http://www.groovybits.com/SrcViewer.aspx?inspect=~/PersistantImage.ashx

您可以通过添加 AppSetting 在里面 web.config :

<add key="UniqueImageName" value="~/Images/image_name.gif"/>

并使用处理程序而不是图像本身的路径引用每个图像的源:

~/Handlers/PersistantImage.ashx?key=UniqueImageName

dkarzon Sven Grosen 17 年前

这与IE中透明PNG的“修复”有关。

我在处理一个网站时遇到了同样的问题,很快就发现没有有效的解决方案可以同时解决这个问题和透明的PNG图像。

Dan Fabulich 16 年前

这个家伙有一个 great writeup on IE6 caching problems ,但博客似乎已关闭。

他把问题分成两部分:

IE6 background-image flicker
IE错误/功能: Internet Explorer Cache Is Not Used When You Run innerHTML Code to Insert the Same Image Multiple Times . 微软建议了两个非常糟糕的解决方法(在我的例子中,它们甚至都不起作用),但您也可以通过确保不插入 <img> 通过InnerHTML标记。

问题2的自然解决方案是使用 background-image 而不是 <IMG & GT; 标签;阴险地,这将迫使你直接进入问题1;结果,你可能会击败问题2,错误地认为你没有进步。

在我的情况下,当我替换我的 innerHTML <IMG & GT; 带标签 <div> 有标签 背景图像 和习惯于 document.execCommand("BackgroundImageCache", false, true) 修复闪烁。

Igor Barbashin 15 年前

我为我的大多数项目找到了解决方案。

我在用 jquery FancyBox插件 几乎在每个项目中。如果你使用FancyBox “剩余X项” 问题是这样的解决方案:

在靠近文件末尾的FancyBox的CSS文件中,有一组IE过滤器,可以正确加载半透明PNG。像这样:

.fancybox-ie6 #fancybox-close { background: transparent; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='fancybox/fancy_close.png', sizingMethod='scale'); }

正如您可以注意到的,src属性中的路径是错误的。

只需修复所有过滤器的路径(大约有20个过滤器),问题就会解决!

我建议放置一个相对于根的路径,如下所示:

.fancybox-ie6 #fancybox-close { background: transparent; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/css/fancybox/fancy_close.png', sizingMethod='scale'); }

Razor 15 年前

我通过以下操作解决了这个问题。这是一个黑客,但它起作用。

只需在body标签后使用不可见的img标签加载图像。如,

<body>
  <img src="problem_image_here.jpg" style="display:none">

  ...
</body>

IE似乎通过CSS加载了相同的图像,之后没有问题。