Question

我想知道这是否可行：我希望我的整个网站延迟到准备就绪，然后做一个淡入淡出。我没有使用连续滚动或类似的东西。我只是希望我的页面以更流畅的一次性风格显示。

如果我将一个class =“lazy”添加到body标签，然后添加一个像这样的jQuery脚本，我希望该网站能够顺利淡入淡出。但它不起作用。 $（ '懒惰 '）淡入（' 快'）;

Answer 1

我假设你有一个'main'js文件正在所有页面加载，那么你可以做

$('body').fadeOut(0);
$(document).ready(function(){
    $('body').fadeIn('fast');
});

Answer 2

另一种选择是（这里是jsfiddle）：

CSS：

body {
    display: none;
}

JS：

$(function() {
    $('body').fadeIn(500);
});

Answer 3

您可以使用JavaScript在页面执行后立即隐藏页面，然后在页面准备就绪（onLoad）时再次显示它，如php_nub_qq所示。您可能会改变这一点并等待其他事情准备就绪，就像下载图像一样。但是，如果你有一个慢/移动浏览器，可能会发生该页面出现在浏览器中，然后javascript执行并隐藏，然后显示页面导致讨厌的闪烁。

你可以按照Josh Beam的建议组合使用Javascript和css，但是如果用户禁用了javascript，他们将永远不会看到任何内容，因为“fadeIn”永远不会触发。

但是你可能会更好地考虑为什么你需要一次显示页面？也许你的一个页面资源/插件很慢，你应该解决它。如果需要具有非常高性能需求的特定类型的用户体验，也许您应该更改为前端的单页应用程序样式。

从根本上说，您正在尝试做一些可能最好留给浏览器的事情，并且在应用上述任何一项之前，在搜索引擎优化，用户体验和跨浏览器兼容性方面可能会产生意想不到的副作用。

懒惰加载我的整个网站？

3 个答案: