1

我找到了这个不错的 jQuery预加载器/进度条，但我无法让它按预期工作。问题是它首先加载我的页面，在我的整个页面加载后，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>

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

4

2 回答 2

3

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

  1. 插件有缺陷。
  2. 您的页面中有一些导致重定向的问题。

我创建了一个测试小提琴并发现了以下内容：

  1. 如果页面上没有图像，则completeImageLoading(); 永远不会调用插件的私有函数，因为它仅绑定到图像元素。当没有图像 -> 没有绑定 -> 没有触发 -> 没有完成 -> 你保持覆盖 0% 时，正如未运行的小提琴所证明的那样（当页面未运行时，jsfiddle 看不到相关图像） .
  2. 该插件不考虑远程图像。因此，如果您像这样声明它们<img src="http://example.com/image.jpg">- 那么它将无法工作，因为插件无法识别它们。事实上，它$.ajax用于加载图像，显然，在尝试访问另一个域时会产生错误。
  3. 该插件不会重新加载页面（至少在 Google Chrome 中）......在小提琴中检查您的控制台输出。每次单击运行时，它会显示一次消息。

建议：

  1. 确保您至少提供了一张相对或背景图像（尽管我没有测试过背景...）以使插件正常工作。
  2. 向我们展示更多代码。小提琴演示了该插件不会导致页面重新加载（至少在 Chrome 中......您是否使用其他浏览器？）。一定是你制造的东西干扰了这里。
  3. 为插件指定一些选项（当没有选项时表现得很奇怪）。

关于预加载器的编辑

关于预加载器......如果显示进度对您来说不是强制性的，那么您可以使用一个window.onload技巧。在 DOM 准备就绪$(...)时，您可以创建一个不透明的页面叠加层，其中包含“请稍候...”消息和一些动画（如果您喜欢的话）。然后等待window.onload 事件，该事件“在文档加载过程结束时触发......当文档中的所有对象都在 DOM 中，并且所有图像和子帧都已完成加载时”。触发时window.onload，您只需移除叠加层，瞧——页面已准备就绪！

关于预加载器的编辑 2

其实，你甚至不需要$(...)……我到底在想什么？只需在您的 html 中创建您的叠加层（一个具有唯一 id 的简单 div），对其进行样式设置以使其充满屏幕并为其提供z-index:1337CSS 属性以使其覆盖整个页面。然后，在 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;
    }
};

当然，它并不是真正的预加载器，而只是一种模仿。

这是一个你可以玩的工作小提琴。

PS我个人不欣赏预加载器，但这只是我......

于 2012-06-11T09:56:48.190 回答
1

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

<script type="text/javascript">         
            $("body").queryLoader2();
</script>
于 2012-06-11T09:27:11.527 回答