XHTML JavaScript预加载页面的其余部分之前的图像

是否有反正我可以延迟显示的HTML代码（页），直到某些图像加载，使布局出现与标题图像以及HTML？XHTML JavaScript预加载页面的其余部分之前的图像

谢谢。

2010-09-30 Francisc

你为什么要这样做？懒惰地显示页面是一个功能，而不是一个bug;给你的图像正确的宽度/高度，以便它们不会改变负载上的页面布局，你应该没问题;预加载仅适用于不属于默认页面结构的图像，因为它们稍后通过脚本或悬停效果添加 – Christoph 2010-09-30 16:41:32

我只能说我的客户是白痴并且不会理解争论...... – Francisc 2010-09-30 16:42:38

哦，而且布局不闪烁，大小已经到位...... – Francisc 2010-09-30 16:44:35

这应该这样做，但它是你的，以保护客户从自己的责任 - 毕竟，你是专业的...

<head> 
<script type="text/javascript"> 
//<![CDATA[ 
with (document.documentElement.style) { 

    visibility = 'hidden'; 
    overflow = 'hidden'; 

    window.onload = function() { 
    visibility = ''; 
    overflow = ''; 
    }; 
} 
//]]> 
</script> 
</head>

注：使用display = 'none'而不是不工作，我的（有点老）Opera 10.10作为onload将立即启动...

此外，这将延迟显示页面，直到全部外部资源已被加载。如果你只是想等待某些图像，你需要一个更复杂的脚本（未经测试）：

<head> 
    <script type="text/javascript"> 
//<![CDATA[ 
document.documentElement.style.display = 'none'; 
//]]> 
    </script> 
</head> 
<body> 
    <img stc="…" width="…" height="…" alt="…" class="preload"> 
    <!-- page contents… --> 
    <script type="text/javascript"> 
//<![CDATA[ 
(function() { 
    var remaining = 0; 

    function listener() { 
     if(!--remaining) 
      document.documentElement.style.display = ''; 
    } 

    for(var i = 0; i < document.images.length; ++i) { 
     var img = document.images[i]; 
     if(/(^|\s)preload(\s|$)/.test(img.className) && !img.complete) { 
      ++remaining; 
      img.onload = listener; 
      img.onerror = listener; 
     } 
    } 
})(); 
//]]> 
    </script> 
</body>

来源

2010-09-30 16:59:08 Christoph

谢谢克里斯托弗，感谢大家对我们所提供的所有帮助。 – Francisc 2010-09-30 20:10:42

我已经决定在阅读完所有内容之后不要这样做，并且看到这样的解决方案意味着隐藏和展示身体，我希望有一种更优雅的方式，那就是没有。再次感谢你，非常感谢。 – Francisc 2010-09-30 20:11:53

我分享克里斯托夫认为，一个网页应该被显示给用户以最快的速度possible-即使只是页面的一部分。如果没有任何事情发生，这很烦人。

但你可以尝试

<body id='body' style='display:none;' 
     onload="document.getElementById('body').style.display='block';">

（或不工作，也

<body style='display:none;' onload="this.style.display='block';">

- 需要尝试）

这将所有图片，脚本，样式表后显示的页面，并加载多媒体文件。

来源

2010-09-30 16:59:48 Jan

afaik如果某些浏览器是'display：none'，则不会加载图像 - 请使用'visibility'（请确认）;此外，您的报价不能正确嵌套 – Christoph 2010-09-30 17:06:08

我刚刚尝试使用Firefox 3.5，Chrome 6，MSIE8。我在onload上使用了一个图像，并且它对它们进行了处理（显示：没有在body上）。但我反对这个建议。 – some 2010-09-30 17:09:57

如果图像出于某种原因未加载，则页面将不可见，因为没有onload事件。 – some 2010-09-30 17:18:49

XHTML JavaScript预加载页面的其余部分之前的图像

回答

相关问题