1

ページの読み込み時にローダーを表示し、読み込まれたときに非表示にするにはどうすればよいですか?

$(document).ready(function() {
    $('.windowLoader').show().fadeOut(2000);
});

ページの読み込みが開始されてからしばらくしてからローダーを表示しfadeOut、ページが読み込まれる前にイベントの 2000 ミリ秒の期間が完了することがあります。

DOM の準備が整うとすぐにローダーの表示を実行し、ページが読み込まれるまで (画像ではなく) 表示されたままにし、ローダーを非表示にする方法はありますか?

4

2 に答える 2

4

ローダーをドキュメントに直接配置し、準備ができたらjQueryを使用して削除してみませんか? 例えば

<div id="loading"></div>

$(document).ready(function() {
    $("#loading").fadeOut(function() {
        $(this).remove(); // Optional if it's going to only be used once.
    });
});

$(document).ready()それ以外の場合は、メソッドの上部にある読み込みバー (/show/create) 内で他のことを行っている場合.fadeIn()は、広範なコードを実行してから、下部で.fadeOut()

JavaScriptを使用していない人が読み込みバーを表示することを心配している場合は、次のことも追加してください。

<noscript>
    <style> #loading { display:none; } </style>
</noscript>
于 2013-08-22T11:55:14.863 に答える
0

コードに従ってカスタマイズするのに役立つはずです

  $(document).ready(function () {
            // calculate height
            var screen_ht = jQuery(window).height();
            var preloader_ht = 5;
            var padding = (screen_ht / 5) - preloader_ht;
            jQuery("#preloader").css("padding-top", padding + "px");


            // loading animation using script 

            function anim() {
                jQuery("#preloader_image").animate({ left: '1px' }, 2000,
                function () {
                    jQuery("#preloader_image"), animate({ left: '1px' }, 2000);
                }
                );
            }
            //anim();
        });
    function hide_preloader() {
    // To apply Fade Out Effect to the Preloader 
    jQuery("#preloader").fadeOut(1000);
    }
    </script>
<style>
    #preloader {background: #1c1c1c;position:fixed;left:0px; top:0px; width:100%; height:100%; text-align:center;color:#fff;z-index: 100000000;}
    #preloader div {width:228px;height:240px;margin:auto;padding:10px 0;text-align:center;overflow:hidden;}
    #preloader_image {width:228px;height:240px;position: relative;left:0px;top:-10px;}
</style>
</head>

<body id="home" onload="hide_preloader()">
    <div id="preloader">
        <div>
            <div id="preloader_image">
                <img src="loading.gif" style="position: absolute;bottom: 0;left: 35%;">
            </div>
        </div>
    </div>
    </body>
于 2013-08-22T11:58:00.740 に答える