Internet Explorer 中的图像加载超时

Posted

技术标签:

【中文标题】Internet Explorer 中的图像加载超时【英文标题】:Image load timeout in Internet Explorer 【发布时间】:2011-08-09 12:28:41 【问题描述】:

我有一个内部应用程序页面,它显示使用 Web 服务从文档存储系统流式传输的文档图像。我遇到的问题是,当用户进行搜索时,他们可能会获得数百次点击,我必须将其显示在一个大页面上,以便他们可以全部打印出来。这在 Firefox 中运行良好,但在 IE 中它会在一段时间后停止加载图像,所以我显示了大约 100 个图像,其余的只有损坏的图像符号。是否有可以更改此超时的设置?

【问题讨论】:

@Niklas - 如果不接受任何答案,是否不会自动奖励赏金? 嗯,我其实不知道?如果能这样工作就好了。 @Niklas - 来自meta.stackexchange.com/questions/16065/… :“在赏金期结束时,如果赏金发起人没有手动授予赏金,符合条件的答案将自动获得一半的赏金。”跨度> 谢谢!不过我还是希望凯文能学会接受更多的问题…… @Kevin - 不。但是如果您能够找到答案,就像您在这个问题 (***.com/questions/1868044/…) 中所做的那样,您可以发布您的解决方案作为问题的答案,然后接受你自己的答案。这实际上是受鼓励的,并且比像您所做的那样编辑问题并将解决方案放在那里更可取。 【参考方案1】:

如果问题确实是超时,您可以通过使用“延迟加载”脚本并仅在加载现有图像后将新图像添加到文档中来解决它。

有很多方法可以做到这一点,但这里有一个简单的例子,我把它放在一起并进行了测试。而不是这个:

<img src="image001.jpg" />
<img src="image002.jpg" />
<img src="image003.jpg" />
<img src="image004.jpg" />
<!-- Etc etc etc -->

你可以这样做:

<div id="imgsGoHere">
</div>

<script type="text/javascript">
    function crossBrowserEventAttach(objectRef, eventName, functionRef)
    
        try 
            objectRef.addEventListener(eventName, functionRef, false);
        
        catch(err) 
            try 
                objectRef.attachEvent("on" + eventName, functionRef);
            
            catch(err2) 
                // event attachment failed
            
        
    


    function addImageToPage()
    
        var newImageElement = document.createElement("img");
        newImageElement.src = imageArray[nextImageNumber];

        var targetElement = document.getElementById("imgsGoHere");
        targetElement.appendChild(newImageElement);

        nextImageNumber++;

        if (nextImageNumber < imageArray.length) 
            crossBrowserEventAttach(newImageElement, "load", addImageToPage);
            crossBrowserEventAttach(newImageElement, "error", addImageToPage);
        
    

    var nextImageNumber = 0;

    var imageArray = new Array();
    imageArray[imageArray.length] = "image001.jpg";
    imageArray[imageArray.length] = "image002.jpg";
    imageArray[imageArray.length] = "image003.jpg";
    // .
    // .
    // .
    // Snip hundreds of rows
    // .
    // .
    // .
    imageArray[imageArray.length] = "image999.jpg";

    addImageToPage();
</script>

只有在前一张图片加载(或加载失败)后,才会将每张图片添加到页面中。如果您的浏览器超时,我认为这将解决它。

当然,问题实际上可能不是超时,而是您的内存/系统资源不足而 IE 正在放弃。或者可能像 Sra 所说的那样存在 IE DOM 限制。

【讨论】:

不错的答案。我不知道那个+1 我认为这不是内存/资源问题,因为它在 Firefox 中运行良好。我会给你延迟加载建议。 IE 6-8 使用内存和资源的效率不如 Firefox 或其他现代浏览器。您在 IE 中经常会遇到其他地方不会出现的瓶颈。 @Joshua,首先,感谢您的建议。在尝试实现这一点时,我至少发现了部分问题。出于某种原因,IE 正在转向兼容模式中间页面加载。我们的安全检查将其检测为与登录时不同的浏览器并终止会话。然而,纠正这个问题仍然没有完全解决问题。 IT 加载了 50% 以上的图像,但在加载所有图像之前它仍然处于死亡状态。 @Kevin - 嗯...我不确定还有什么建议。确定不是资源问题?正如 Peteorpeter 所提到的,IE 的效率通常低于其他浏览器,并且可能会更早地达到其极限。您可以使用更简单的图像(可能是 2 色 GIF,而不是全色 JPEG)或图像的缩小副本(为测试目的创建 50% 大小的缩小副本)进行测试,看看它是否加载了更多图像?如果是这样,您可能会遇到资源限制,并且可能没有解决方法。【参考方案2】:

没有最终解决方案,但有一些提示...... 我认为ie Dom挂断了。我在其他情况下见过这种情况。我只需要显示图像并使用 js 在图像聚焦时加载图像,但我认为如果你直接点击 print 则需要工作。您可以使用新的 css 功能直接存储图像数据而不是链接。那应该可以解决您的问题。我不太确定,但我认为从 ie 7 开始就支持它

【讨论】:

我不是最擅长 css 的,但我会看看你的建议。不幸的是,由于各种原因,我认为我无法存储图像。【参考方案3】:

我的猜测是你必须解决 IE 设置,最简单的方法就是不显示未加载的图像或用默认图像替换它们:

您的 html:

<img src="http://domain.com/image.jpg" />

你的 js:

$('img').load(function()

    // ... loaded  

).error(function()

    // ... not loaded, replace
    $(this).attr('src','/whatever/default.jpg');

    // ... not loaded, hide
    $(this).hide();

);

【讨论】:

【参考方案4】:

这是微软的问题。不幸的是,这是一个必须在每台计算机上更改的设置,因为没有远程方法可以更改它。要在您的计算机上更改它,请尝试打开 regedit 并添加值为 (#of minutes)*6000 的 RecieveTimeout DWORD。希望这会有所帮助-CodeKid1001

编辑:抱歉,我忘了输入文件路径: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings

【讨论】:

【参考方案5】:

我使用 ASP Pages 使用类似于 laod 高清图片的东西作为背景

但我使用 jQuery 来处理图像及其加载。这是 1 张图片的示例,但稍作调整即可动态加载

myImage = new Image();
        $(myImage).load(function () 
              
               $(this).hide(); //Stops the loading effect of large images. can be removed
               $('.csBackground li').append(this); //Append image to where you need it
               $(myImage).show();
              ).attr('src', settings.images[0]) //I pass an array from ASP code behind so 0 can be 'i'
                .error( function  checkImages();  ) //try and relaod the image or something?

因此,与其更改超时时间,不如尝试在出错时重新加载图像。

否则我只能找到客户端特定的解决方案(HTTP 超时)

http://support.microsoft.com/kb/813827

【讨论】:

以上是关于Internet Explorer 中的图像加载超时的主要内容,如果未能解决你的问题,请参考以下文章

Internet Explorer 自动为新添加的图像添加高度和宽度属性

我可以将整个 HTML 文档加载到 Internet Explorer 中的文档片段中吗?

jQuery .attr() 使 Internet Explorer 崩溃

Internet Explorer 将 Meteor.js 应用程序识别为 Intranet 站点。不会加载

CSS3 中的转换在 Firefox 或 Internet Explorer 中不起作用

Internet Explorer 11 中的“未处理的承诺拒绝 TypeMismatchError”