jQuery，隐藏内容直到加载 [英] jquery, hide content until loaded

问题描述

我目前正在使用此脚本来淡化页面过渡:

I am currently using this script to fade page transitions:

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

});​

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

this works like a charm when the content is alredy in cache, but when an image needs to load it will momentarily appear then be hidden and faded in

所以我需要的是一种隐藏内容的方法，直到内容完全加载，然后才将其淡入

so what i need is a way to hide the content until it is fully loaded and only after that let it be faded in

希望有人可以帮助我，在此先感谢

hope someone can help me, thanks in advance

推荐答案

默认情况下，使用CSS隐藏元素，然后在需要时显示它.

Use CSS to hide the element by default and then show it when you like to.

CSS

body {
  display: none;
}

jQuery

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

load事件在元素和所有子元素都包含时被发送到元素 已完全加载.

The load event is sent to an element when it and all sub-elements have been completely loaded.

请参见加载事件.

您也可以考虑将"fadeX"类替换为单个类，例如"fade"

You might also consider to replace your "fadeX" classes with a single class, something like "fade"

这篇关于jQuery，隐藏内容直到加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！