jQuery，隐藏内容直到加载完成

Question

jQuery，隐藏内容直到加载完成

17

我目前正在使用这个脚本来实现页面过渡淡入淡出：

$(document).ready(function() {

    $(window).bind("unload", function() {});
    $("body").css("display", "none");

    $("body").hide();

    $("body").fadeIn(2000);

    $('a.fade1, a.fade2, a.fade3, a.fade4').click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(700, redirectPage);
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

这个在内容已经在缓存中的情况下非常好用，但是当需要加载图像时，它会短暂地出现，然后被隐藏并淡入。

因此，我需要一种方法来隐藏内容，直到它完全加载，然后才让它淡入。

希望有人能帮助我，提前感谢。

- user1163818

你可以在页面的body上使用display: none，这样它就一直隐藏，直到jquery生效。 - Dave Becker

5个回答

14

实际上我不会一开始就使用CSS，原因在于如果某种原因导致页面无法加载JS，那么页面也将无法显示内容。我会将所有的内容都保留在脚本中并写入DOM，这样即使JS无法加载，也不会影响页面内容的呈现。

<script>
document.write('<style>body { visibility: hidden; } </style>');
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
    delay();
});

function delay() {
    var secs = 1000;
    setTimeout('initFadeIn()', secs);
}

function initFadeIn() {
    jQuery("body").css("visibility","visible");
    jQuery("body").css("display","none");
    jQuery("body").fadeIn(1200);
}
</script>

- Chris

13

为什么不把所有初始的CSS都放在一个CSS文件中呢？

<head>
<!-- some stuff of yours -->
<style>body{display:none}</style>
</head>
<body>
</body>

那么你的JavaScript只需要调用fadeIn()即可。这样，当浏览器渲染<body>标签时，它已经知道要隐藏它，因此在调用fadeIn()之前根本不会显示。

- Andreas Wong

9

有时候 jQuery 会让人们忽视基本的常识，你的回复提醒我们要重拾这一点。+1 - Niet the Dark Absol

“lol，‘common sense’真的是正确的术语吗？通常，它指的是人们普遍知道的东西…” - ashleedawg

4

由于现在是2023年，我想提示您，为了避免错误，现在应该这样编写代码：

CSS

body {
  display: none;
}

JQuery

$(window).on('load', function(){
  // When the page has loaded
  $("body").fadeIn(2000);
});

- user3495363

3

每个图像的CSS：visibility: hidden;

jQuery.ready：visibility: visible;（或使用淡入淡出或其他你喜欢的效果）。为什么使用visibility而不是"display"？当项目开始加载时，display会在页面上产生许多“跳跃”和“闪烁”。

另外，你可以尝试使用jQuery的load方法代替ready。

- Shomz

只是出于好奇，有没有任何理由让我在这种特定情况下更喜欢使用 visibility:hidden 而不是 display:none？ - Richard Neil Ilagan

1

是的，我刚刚编辑了我的答案... visibility 保存元素应该出现的空白空间，而 display 则直接移除它。虽然如果你在处理 body 元素时可能会一样...但还是知道这个很好。 - Shomz

只需使用 load() 方法即可。 - Shomz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stefan · Accepted Answer

可以使用CSS默认隐藏元素，然后在需要时显示它。

CSS

body {
  display: none;
}

jQuery

$(window).load(function() {
  // When the page has loaded
  $("body").fadeIn(2000);
});

当元素及其所有子元素都完全加载完成时，会向该元素发送load事件。

请参阅load事件。

您还可以考虑将您的“fadeX”类替换为单个类，例如“fade”。