Question

我想让网页页面彼此滑动。所以我做了$（'a'）。click（）;检查链接是否为本地的函数，以及是否获取链接href并将其加载到正文。

$('a').click(function(){
    var href=$(this).attr('href');  
    $('body').load(href);
    return false;
});

它看起来不错，但我的网站也包含了很多js插件。执行它们需要一段时间，.load动作首先显示'由js'内容保持不变，然后执行js。它会导致内容不良flickr。

是否可以使用JS的所有exectuion缓存新内容，在完成之前不要更改旧主体，并且当所有DOM和JS都在新内容上完成时，slideOut旧内容和slideIn新内容？

编辑：我认为重点不是检测js执行，而是检查是否加载了所有其他文件 - 应该在$（window）.load的新文件同时触发DOM更改。

[编辑] ----------------------------------------- -----------------------------

我的解决方案是css代码（css在构建dom之前始终加载），具有跨浏览器不透明度0。

.transparent{
    -moz-opacity: 0.00;
    opacity: 0.00;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
}

它可以防止内容的错误，但并非总是如此。现在它可以以某种方式检测jQuery ajax加载内容并应用一些show timeout等等。但实际上问题仍然存在。

现在为这个问题做一个更简单的例子：

如何在$（'body'）之后开始更改DOM。在点击激活.load（'something.php'）函数的链接后，加载（'something.php'）3000ms？（点击后应立即开始加载，但必须稍后启动DOM更改）

Answer 1

也许你应该使用promises并尝试这样的事情：

$('a').click(function(){
    var href=$(this).attr('href');
    $('body').hide();
    $('body').load(href, function() {
      $('body').show();
    });
});

Answer 2

.load函数提供第二个参数，该参数是操作完成时要调用的函数。实际上，您可以使用它来同步依赖于或必须等待ajax调用完成的所有操作。像这样：

$("body").load(href, function(responseData){
    // whatever you need to do when the ajax call is complete
})

编辑：正如adeneo在评论中指出的那样，请查看the documentation。

Answer 3

有一件事可以帮助你把你的HTML 在一些带有用户定义类型的脚本标记内（或在脚本标记内加载html）

像这样：

<script type="text/template" id="myTemplate">
    <div>some html</div>
</script>

在您将其附加到页面

之前，Dom不会理解其中的html代码

//... at some point
var tmp = $('#myTemplate').html();
$(body).append(tmp);

Ajos！

Answer 4

不要使用.load（）。该方法特别针对您要避免的内容。

尝试这样做：

使用$ .get，$ .post，$ .ajax或任何适合您的方法加载。这样，您就可以将脚本作为HTML字符串获取HTML代码。
创建一个隐藏的div，或透明的div，或其他元素来放入内容。这里的诀窍是确保在脚本执行之前不显示此div。要做到这一点，唯一的方法是在每个要加载这种方式的页面中添加最后一个脚本，并使用一个删除旧内容并显示新内容的函数。作为最后一个脚本，它将在其他脚本执行之前执行，因此您的DOM应该准备就绪。

当然，如果您的脚本依赖于$（document）.ready（）之类的东西，这将无效，因为这将立即执行。图像有同样的问题。它们是异步加载的，所以你不知道加载它们的时间，除非你把处理程序附加到每个图像的onload事件上，这不是一个好主意。

jQuery .load（）等到内容加载完毕

4 个答案: