jquery,在页面未完全加载时加载页面

Posted

技术标签:

【中文标题】jquery,在页面未完全加载时加载页面【英文标题】:jquery, loading a page while page is not fully loaded 【发布时间】:2016-06-10 00:10:49 【问题描述】:

我有一个包含这一行的 javascript 文件:

$('.item').load('page'); // (tried with document ready)

它不起作用。看起来该行在页面完全加载之前执行(因为它在我在控制台中键入同一行时有效)。

【问题讨论】:

这里有问题吗? 除非选择器匹配具有“item”类的元素,否则不会加载任何内容。您确定页面最初加载时存在具有类项的元素并且之后没有通过代码添加吗?这对我来说听起来像是一个时间问题。也许添加一些 console.write($('.item').length) 代码来查看它是否存在 我重复一遍,当我输入同一行代码来控制台时,它可以工作。当我尝试检查.length时,它在控制台中显示为零:) 我们无法告诉您为什么它会在 DOM 加载之前执行,因为您没有向我们展示您是如何调用它或如何构建 DOM 的。 .item 是由于 setTimeout 5 秒后执行而动态创建的吗?我不知道,因为我看不到代码。 您发布的代码没有问题,所以如果它不起作用,您需要发布更多代码。 【参考方案1】:

您需要验证几个条件。相对于使用此加载功能的页面,文档的路径(包括文件扩展名)需要正确。您尝试加载的元素需要存在。

您的控制台是否出现错误?它说什么?

这绝对有效。

<body>
    <div class="item"></div>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script>
        $(document).ready(function() 
            $('.item').load('page.html');
        );
    </script>
</body>

【讨论】:

好吧..我的项目有点复杂:)) 不幸的是,您的示例并不复杂 - 也许您可以在原始问题中添加更多细节,包括来自控制台或网络日志的错误消息。 显然某些复杂性是问题的原因。不幸的是,您没有在此处包含任何复杂性,因此我们无法轻松调试我们看不到的内容...【参考方案2】:

 $('document').ready(function()
        $('.item').load('page');
     );

你需要在页面准备好时调用它。

【讨论】:

【参考方案3】:

您是否尝试过等到窗口加载完毕?:

$(window).load(function()
    $('.item').load('page'); 
);

【讨论】:

你有我们可以看到的 JSFiddle 或现场示例吗?

以上是关于jquery,在页面未完全加载时加载页面的主要内容,如果未能解决你的问题,请参考以下文章

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?

jquery怎么判断页面加载完全

Jquery Mobile:“pageshow”事件仅在 Shift F5(完全重新加载)时触发,但在加载另一个页面或具有不同查询的同一页面时不会触发

jQuery Mobile:在完全加载时修改 DOM 以使页面高度为 100%

jQuery Mobile 面板在页面完全加载之前在初始加载时显示,速度较慢的设备