1

一部のコードが実行される前に、すべての背景画像が読み込まれるまで待機する方法はありますか? これが1つの画像で機能することはわかっていますが、さまざまな画像にどのように適応させることができますか?

var firstBackgroundImage = new Image();         
                firstBackgroundImage.onload = function () {
                        $('#main-slider').animate({opacity:1}),600;

            }; 
            firstBackgroundImage.src = "http://www.domain.com/img/iphone.png";

HTML

 <div id="main-slider"></div>

CSS

#main-slider{
   opacity:0;
}

ありがとう！

4

2 に答える 2

1

試す：

$(window).load(function() {
    // this code gets executed when all content of the page (including images) is loaded 
});
于 2013-08-26T09:12:30.577 に答える
1

完全なページが必要な場合。つまり、すべてのコンポーネントが完全に読み込まれるまで、読み込み中の画像がメインの div を隠して表示されるということです。

 $(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-26T09:13:12.940 に答える