Question

我目前正在使用此脚本淡化页面转换：

$(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;
    }

});

当内容在缓存中变为现实时，这就像一个魅力，但是当图像需要加载时，它会暂时出现然后被隐藏和淡入

所以我需要的是一种隐藏内容直到它完全加载的方式，只有在它之后才能让它褪色

希望有人可以帮助我，提前谢谢

Answer 1

默认使用CSS隐藏元素，然后在您喜欢的时候显示它。

<强> CSS

body {
  display: none;
}

<强>的jQuery

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

当load元素和所有子元素都有时，load事件被发送到元素已完全装满。

请参阅load event。

你也可以考虑用一个类替换你的“fadeX”类，比如“fade”

Answer 2

为什么不使用... CSS？

来放置所有初始css

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

然后你的js只需要担心调用fadeIn()。这种方式，当浏览器呈现<body>标记时，它已经知道要隐藏它，因此在调用fadeIn()之前它将不会显示。

Answer 3

我实际上不会使用CSS开始，这就是原因。如果由于某种原因JS无法在页面上加载，它也将无法实际显示您的页面内容。我将所有内容保存在脚本中并写入DOM，因此如果失败，则不会发生任何事情。

<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>

Answer 4

每张图片的CSS：visibility：hidden;

jQuery.ready：visibility：visible; （或使用淡化或任何你喜欢的）。为什么visibility而不是'显示'？当项目开始加载时，display会在页面上产生很多“跳跃”和“故障”。

此外，您可以尝试使用jQuery's load method代替ready。

Answer 5

因为是2021年，所以想提示一下，现在需要这样写代码，以免出错：

css

body {
  display: none;
}

JQuery

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

jquery，隐藏内容直到加载

5 个答案: