确保浏览器一次显示所有内容 [英] Make sure that the browser displays everything at once
问题描述
解决方案我已经想到：
<在PHP脚本的顶部和底部输出缓冲 -
ob_start 和 ob_end_flush 以确保在处理脚本之前没有发送任何内容。 你认为哪个是最适合所有浏览器，甚至在慢电脑上的方法？我还没有在不同的平台和电脑上测试不同的速度和RAM。如果您有媒体重型网站的经验或有更好的方法，请告诉我要采取哪条路径。
如果你可以依靠JavaScrip，有一个简单而有效的解决方案一次性显示所有内容。
- 将白色层放在整个窗口的顶部。这将隐藏所有内容。
- 使用事件
window.onload隐藏/删除覆盖层。 - 使用事件
window.onunload再次显示隐藏层。
图层：
...
< style>
html，body {height：100％; }
#hiding {
display：block;
width：100％;
height：100％;
position：absolute;
顶部：0;
左：0;
background：#fff;
}
< / style>
< / head>
< body>
< div id =hiding>< / div>
...
JavaScript事件：
...
< script>
window.onload = function（）{
document.getElementById（'hiding'）。style.display ='none';
};
window.onunload = function（）{
document.getElementById（'hiding'）。style.display ='block';
};
< / scritp>
< / body>
< / html>
注意：不要将这些样式和JavaScript代码放入外部文件。
注2：将加载微调框放置在隐藏图层的中间是很好的。您可以将其添加到 #hiding {...} 样式块： background：#fff url（/images/spinner.gif）center center;
I have this website that is heavy in images and text and on slow connections, internet browsers or computers with low RAM the text is loaded first then the images take a while to load. How can I make sure that everything is displayed out at the same time?
Solutions I've thought of:
- Output Buffering -
ob_startandob_end_flushat the top and bottom of my PHP script to make sure that nothing is sent before the script is processed. - Loading the whole DOM in a Javascript variable then echoing it out after all is loaded.
Which do you reckon is the best way that will work on all browsers and even on the slow computers? I haven't tested it on a variety of platforms and computers with varying speeds and RAM. If you have experience with media heavy sites or have a better way, please let me know which path to take.
If you can afford to rely on JavaScrip, there is a simple and effective solution to show all the content at once.
- Put a white layer on top of the whole window. This hides all the content.
- Use event
window.onloadto hide/remove the covering layer. - Use event
window.onunloadto show up again the hiding layer.
The layer:
...
<style>
html, body{ height: 100%; }
#hiding {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
}
</style>
</head>
<body>
<div id="hiding"></div>
...
JavaScript events:
...
<script>
window.onload = function () {
document.getElementById('hiding').style.display = 'none';
};
window.onunload = function () {
document.getElementById('hiding').style.display = 'block';
};
</scritp>
</body>
</html>
NOTE: Do NOT put those styles nor JavaScript code into external files.
NOTE 2: It would be nice to place a loading spinner in the middle of the hiding layer. You can add this to #hiding { ... } style block: background: #fff url(/images/spinner.gif) center center;
这篇关于确保浏览器一次显示所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
