Javascript 预加载程序不会预加载并再次加载页面_Javascript_Jquery

Javascript 预加载程序不会预加载并再次加载页面

javascript jquery

Javascript 预加载程序不会预加载并再次加载页面,javascript,jquery,Javascript,Jquery,我找到了这个很好的jQuery，但我无法让它按预期的方式工作。问题是，它首先加载我的页面，在加载整个页面后，0%-100%的栏会快速显示，然后再次重新加载我的页面。因此，在加载页面之前，它不会显示进度条，并且还会再次加载页面以下是我的实现代码： <head> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jque

我找到了这个很好的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>

提前感谢您的帮助。

尝试此操作删除document.ready事件，只需调用此操作：-

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

尝试此操作删除document.ready事件，只需调用此操作：-

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

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

这个插件有缺陷。您的页面中存在导致重定向的问题。我创建并发现了以下内容：

如果页面上没有图像，则插件的私有函数completeImageLoading；从未调用，因为它仅绑定到图像元素。当没有图像->没有绑定->没有触发->什么都没有完成->你停留在覆盖0%上，如未运行的fiddle所示。当页面未运行时，jsidle看不到相关图像。该插件不考虑远程图像。因此，如果你像这样声明它们，那么它将无法工作，因为插件无法识别它们。事实上，它使用$.ajax加载图像，这显然会在尝试访问另一个域时产生错误。插件不会重新加载页面，至少在谷歌浏览器中是这样。。。在小提琴中检查控制台输出。它会在每次单击运行时显示一次消息。建议：

请确保您提供至少一个相对或背景图像，虽然我还没有测试的背景。。。让插件工作。给我们看更多的代码。小提琴表明插件不会导致页面重新加载，至少在Chrome中是这样的。。。您正在使用其他浏览器吗？。一定是你做的东西干扰了这里。为插件指定一些选项，当没有选项时，插件的行为会很奇怪。关于预加载程序的编辑

关于预加载。。。如果显示进度对您来说不是强制性的，那么您可以使用window.onload技巧。关于DOM就绪$。。。您创建了一个不透明的页面覆盖，请稍候。。。信息和一些动画，如果你喜欢的话。然后等待在文档加载过程结束时触发的事件。。。当文档中的所有对象都在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;
    }
};

当然，它不是一个真正的预加载程序，只是一个模仿

给你

另外，我个人不喜欢预装，但那只是我…

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

这个插件有缺陷。您的页面中存在导致重定向的问题。我创建并发现了以下内容：

编辑2关于预加载程序

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;
    }
};

当然，它不是一个真正的预加载程序，只是一个模仿

给你

另外，我个人不喜欢预装，但那只是我…

我认为这行不通。首先，必须定义body才能工作，其次：插件正在DOM中搜索图像标记。。。它还没有加载。我认为这不起作用。首先，必须定义body才能工作，其次：插件正在DOM中搜索图像标记。。。还没有加载。谢谢你的回答。我有很多代码…我也有图像。我相对地引用了它们…正如我所说的，我使用了如图所示的简单方法，仅使用body元素作为引用…好的，我将尝试指定一些选项并让您知道。但我的主要目标不是预加载图像，而是整个网页…我在这里使用了错误的插件吗？他们说它也适用于网页……QueryLoader2所做的只是扫描给定元素中的图像和背景图像，并在网站可见之前预加载它们他们这么说，他们的代码就是这么做的。显然，QueryLoader的第一个版本是用来预加载整个页面的，但它已经过时，被QueryLoader2取代，后者只预加载图像。我认为你使用了一个错误的、有缺陷的插件。基本上，等待图像加载的想法并不坏，因为通常它们需要最长的时间加载，因此当它们完成后，页面的其余部分就准备好了。但是，嗯。。。这不是防弹的。@Dave如果你感兴趣的话，我已经在我的回答中添加了一些关于预加载程序的信息。谢谢你Oleg。如果我理解正确，DOM ready$。。。函数在将任何内容加载到DOM和window.onload事件之前触发？我真的很想在所有对象都忙于加载时向用户展示一些东西，这样他们就不会认为页面已经计时了ou或任何东西。你能告诉我更多关于如何使用DOM ready函数来显示预加载消息或动画的知识吗？非常感谢。我真的尝试了很多这样的加载程序，其中大多数都是用于图像的，或者它们只是有车/满是废话。谢谢你的回答。我有很多代码…我也有图像。我相对地引用了它们…正如我所说的，我使用了如图所示的简单方法，仅使用body元素作为引用…好的，我将尝试指定一些选项并让您知道。但我的主要目标不是预加载图像，而是整个网页…我在这里使用了错误的插件吗？他们说它也适用于网页……QueryLoader2所做的只是扫描给定元素中的图像和背景图像，并在网站可见之前预加载它们他们这么说，他们的代码就是这么做的。显然，QueryLoader的第一个版本是用来预加载整个页面的，但它已经过时，被QueryLoader2取代，后者只预加载图像。我认为你使用了一个错误的、有缺陷的插件。基本上，等待图像加载的想法并不坏，因为通常它们需要最长的时间加载，因此当它们完成后，页面的其余部分就准备好了。但是，嗯。。。这不是防弹的。@Dave如果你感兴趣的话，我已经在我的回答中添加了一些关于预加载程序的信息。谢谢你Oleg。如果我理解正确，DOM ready$。。。函数在将任何内容加载到DOM和window.onload事件之前触发？我真的很想在所有对象都忙于加载时向用户展示一些东西，这样他们就不会认为页面已经计时了ou或任何东西。你能告诉我更多关于如何使用DOM ready函数来显示预加载消息或动画的知识吗？非常感谢。我真的试过很多这样的装载机，大多数都是为了图像，或者它们都是些垃圾