Question

嗨伙计们标题说我的问题。

Answer 1

你的意思是显示gif动画，直到所有脚本，文本和图像都加载到页面中？

我认为关键在于将jQuery用于文档就绪和图像加载事件。加载所有文本和脚本后将触发文档就绪，这可能在加载所有图像（特别是大图像）之前发生。这是使用图像加载事件的地方。

此外，您应该重构您的HTML代码，如下所示：

如果可能，从头部删除任何脚本标记并将它们放在正文中。
将元标记和样式表链接放在头部。
在body中创建#loader div（需要所有标记和样式），然后放置正常的html内容并包含js库。
最后，设置一个javascript，用于检查文档准备情况和图像加载完成情况。

这是一个非常简单的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>Loader</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <!-- only style scripts and other meta tags except js libs may be put here -->
    </head>
    <body>
        <div id="loader" style="background:red; width:50px; height:50px; position: fixed; margin: auto auto;"></div>
        <!-- all other tags, images and js libraries must be included after "loader" div -->
        <h1>This is loader demo</h1>
        <p>Cras ultricies; orci vel adipiscing tempus, dui nisl faucibus urna, id viverra felis felis et dolor. Sed eget tellus et dolor volutpat viverra. Donec auctor sem eu sapien facilisis auctor?
        <img id="very-big-image" style="float:left; padding: 10px;" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Chrysler_Building_Midtown_Manhattan_New_York_City_1932.jpg" alt="Manhattan high resolution" width="600" />
        </p>
        <p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vehicula lacus id nulla porta eget tristique risus laoreet. Suspendisse condimentum sodales neque quis tempor?
</p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
        var imgs_loaded = 0;
        var imgs_count = 0;

        // Document ready will be triggered only after all scripts are loaded.
        // Document ready may get triggered even before all images are loaded, so we have to manualy check if all images are loaded
        $(document).ready(function(){
            window.imgs_count = $('img').length; // first count how many images there is
            if(window.imgs_count){ // if any image exists do the loading check
                $('img').load(afterImageLoad);
            }
            else { // if no images just hide #loader
                $('#loader').hide(); // or .remove()
            }
        });

        function afterImageLoad(){
            window.imgs_loaded++;
            if(window.imgs_count == window.imgs_loaded){ // if all images loaded
                 $('#loader').hide(); // or .remove()
            }
        }
</script>
    </body>
</html>

请注意，这并不能解决加载背景图像的问题，尽管可以通过图像预加载来解决，然后使用jquery将css background-image propery manualy附加到使用背景图像的每个元素。

我希望这能解决你的问题。

伊万

如何使用jquery在page_load上构建页面进度条？

1 个答案: