确保浏览器一次显示所有内容

Question

确保浏览器一次显示所有内容

Wil*_*Dev 1 html javascript php jquery dom

我有这个网站,图像和文本很重,在慢速连接,互联网浏览器或低RAM的计算机上,文本首先被加载,然后图像需要一段时间才能加载.如何确保所有内容同时显示？

我想到的解决方案:

输出缓冲- ob_start并且ob_end_flush在顶部和我的PHP脚本的底部,以确保在处理脚本之前没有被发送.
将整个DOM加载到Javascript变量中,然后在加载完所有内容后将其回显出来.

您认为哪种方法适用于所有浏览器,甚至是慢速计算机？我没有在各种平台和具有不同速度和RAM的计算机上进行测试.如果您有媒体大型网站的经验或有更好的方法,请告诉我要走哪条路.

Answer 1

Car*_*los 7

如果您有能力依赖JavaScrip,那么可以使用简单有效的解决方案同时显示所有内容.

在整个窗口的顶部放置一个白色图层.这隐藏了所有内容.
使用事件window.onload隐藏/删除覆盖层.
使用事件window.onunload再次显示隐藏层.

图层:

    ...
    <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>
    ...

Run Code Online (Sandbox Code Playgroud)

JavaScript事件:

        ...
        <script>
            window.onload = function () {
                document.getElementById('hiding').style.display = 'none';
            };
            window.onunload = function () {
                document.getElementById('hiding').style.display = 'block';
            };
        </scritp>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

注意:请勿将这些样式或JavaScript代码放入外部文件中.

注2:将加载微调器放在隐藏层的中间会很好.您可以将其添加到#hiding { ... }样式块:background: #fff url(/images/spinner.gif) center center;

归档时间：	12 年，10 月前
查看次数：	329 次
最近记录：	12 年，10 月前