11

我想让网站页面平滑地滑动到另一个页面。所以我做了 $('a').click(); 检查链接是否为本地的函数，如果是，则获取链接href并将其加载到正文。

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

它看起来不错，但我的网站也包含很多 js 插件。执行它们需要一段时间，.loadaction首先显示'unchanged by js'内容，然后执行js。它会导致内容的不良闪烁。

是否可以在 JS 的所有执行中缓存新内容，在完成之前不要更改旧正文，当所有 DOM 和 JS 对新内容完成时，slideOut 旧内容和 slideIn 新内容？

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

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

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

.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 加载的，并应用一些显示超时等等。但实际上问题仍然存在。

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

单击触发 .load('something.php') 函数的链接后，如何在 $('body').load('something.php') 3000 毫秒后开始更改 DOM？（点击后应立即开始加载，但必须稍后启动 DOM 更改）

4

3 回答 3

1

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

$('a').click(function(){
    var href=$(this).attr('href');
    $('body').hide();
    $('body').load(href, function() {
      $('body').show();
    });
});
于 2014-12-15T08:32:27.667 回答
0

不要使用 .load()。该方法专门执行您要避免的操作。

尝试这样做：

  1. 使用 $.get、$.post、$.ajax 或任何适合您的方法加载。这样，您就可以将带有脚本的 HTML 代码作为 HTML 字符串。
  2. 创建一个隐藏的 div，或透明的 div，或另一个元素来放置内容。这里的技巧是确保这个 div 在脚本执行之前不会显示。为此，唯一的方法是在您要以这种方式加载的每个页面中添加最后一个脚本，并使用删除旧内容并显示新内容的功能。作为最后一个脚本，它不会在其他脚本执行之前执行，因此您的 DOM 应该已准备好。

当然，如果您的脚本依赖于 $(document).ready() 之类的东西，这将不起作用，因为它会立即执行。图片也有同样的问题。它们是异步加载的，因此您不会知道它们何时全部加载，除非您将处理程序附加到每个图像的 onload 事件，这不是一个好主意。

于 2014-02-28T20:33:21.180 回答
0

可能有帮助的一件事是将您的 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);

阿霍斯！

于 2013-06-17T13:27:39.483 回答