Question

我找到了这个不错的jQuery preloader/progress bar，但是我无法让它按照预期的那样工作。问题是它首先加载我的页面，在我的整个页面加载后，0％-100％条显示很快，之后它再次重新加载我的页面。因此，它不会在页面加载之前显示进度条，它也会再次加载页面。

这是我的实施代码：

<head>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.queryloader2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").queryLoader2();
        });
    </script>
</head>
<body>
    My content...No other reference in here for the Jquery preloader
</body>

感谢您提前提供任何帮助。

Answer 1

我可能非常非常错误，但在我看来：

该插件存在缺陷。
您的网页中存在导致重定向的问题。

我创建了 a test fiddle 并找到了以下内容：

如果页面上没有图片，则插件的私有函数completeImageLoading(); 永远不会被调用，因为它只绑定到图像元素。当没有图像时 - ＆gt;没有约束力 - ＆gt;没有触发 - ＆gt;什么都没有完成 - ＆gt;你可以使用叠加0％，如小提琴所示，不运行（当页面未运行时，jsfiddle没有看到相对图像）。
该插件未考虑远程图像。因此，如果您将它们声明为<img src="http://example.com/image.jpg"> - 那么它将无效，因为插件无法识别它们。实际上它使用$.ajax来加载图像，这显然会在尝试访问另一个域时产生错误。
该插件不会重新加载页面（至少在Google Chrome中）...在小提琴中检查您的控制台输出。每次单击“运行”时，它会显示一次消息。

<强>建议：

确保您提供至少一个相对或背景图片（虽然我尚未测试背景...）工作。
向我们展示更多代码。小提示演示该插件不会导致页面重新加载（至少在Chrome中......您使用的是其他浏览器吗？）。它必须是你做的东西干扰这里。
为插件指定一些选项（当没有插件时表现得很奇怪）。

关于预加载器的修改

关于预加载器...如果您不强制显示进度，那么您可以使用window.onload技巧。在DOM ready $(...)上，您创建了一个不透明的页面覆盖，其中包含“请稍候...”消息和一些动画，如果您喜欢它。然后等待 window.onload event “在文档加载过程结束时触发...当文档中的所有对象都在DOM中时，所有图像和子框架已完成加载。“当window.onload触发时，您只需删除叠加层即可 - 页面已准备就绪！

关于预加载器的编辑2

实际上，你甚至不需要$(...) ......我到底在想什么？只需在html中创建叠加层（一个带有唯一ID的简单div），将其设置为填充屏幕并为其指定z-index:1337 CSS属性，使其覆盖整个页面。然后，在window.onload上：

window.onload = function () {
    // Grab a reference to your overlay element:
    var overlay = document.getElementById('myOverlay');
    // Check if the overlay really exists
    // and if it is really appended to the DOM,
    // because if not - removeChild throws an error
    if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
        // Remove overlay from DOM:
        overlay.parentNode.removeChild(overlay);
        // Now trash it to free some resources:
        overlay = null;
    }
};

当然，它不是真正的预装载，而只是模仿。

这是 a working fiddle you can play with 。

P.S。我个人并不欣赏预加载器，但那只是我......

Answer 2

试试这个（删除document.ready事件并简单地调用它）： -

<script type="text/javascript">         
            $("body").queryLoader2();
</script>

Preloader不会预加载并第二次加载页面

2 个答案: