0


0

コンテンツ読み込みGifを非表示

ページ上のdivに2つの大きな画像ファイルがあり、ロードに数秒かかります。 「loading gif」が表示されている間にロード中のコンテンツを非表示にし、完全にロードされたらコンテンツを表示するにはどうすればよいですか?

JavaScriptについては何も知りませんが、このコードを使用してみました。 それは私が望んでいたことの半分をした。 「読み込みgif」は機能しましたが、問題はコンテンツが読み込み中に表示されることでした。

        var ld=(document.all);
        var ns4=document.layers;
        var ns6=document.getElementById&&!document.all;
        var ie4=document.all;
        if (ns4)
        ld=document.loading;
        else if (ns6)
        ld=document.getElementById("loading").style;
        else if (ie4)
        ld=document.all.loading.style;
        function init()
        {
        if(ns4){ld.visibility="hidden";}
        else if (ns6||ie4) ld.display="none";
        }

任意の助けは大歓迎です!

2 Answer


0


次のようなコードでjqueryを使用します。

$(document).ready(function(){
    $('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});

次のようなHTMLの場合:


ドキュメントのready関数が呼び出されたときに実行され(DOMおよびその他のリソースが構築された後に呼び出されます)、imgのsrc属性に必要な画像のURLを割り当てます。 + nyquil.orgのURLを必要な画像に変更し、必要な数だけ追加します(ただ、行き過ぎないでください;)。 Firefox 3 / chrome 10をテストしました。

デモはこちら:http://jsfiddle.net/mazzzzz/Rs8Y9/1/


0


HTML構造に取り組むために、2つの画像に notifyLoaded`クラスを追加して、両方が onload`イベントを介してロードされたことを確認できるようにしました。 CSSの背景画像はそのイベントを取得しないため、背景のパスを使用して非表示のimgを作成し、その画像がロードされたときにテストできるようにしました

HTML:


ページ内のjQueryへの参照はすでにあるため、スクリプトを次のように置き換えました。

jQuery:

$(document).ready(function() {
    var $vertical = $('#vertical');
    var $imgs = $('.notifyLoaded');
    var imgCount = $imgs.length;
    var imgLoadedCount = 0;

    $vertical.backgroundparallax(); // Activate BG Parallax plugin

    $imgs.load(function() {
        console.log(this);
        imgLoadedCount++;
        if (imgCount == imgLoadedCount) {
            // images are loaded and ready to display
            $vertical.show();
            // hide loading animation
            $('#loading').hide();
        }
    });
});

#Verticalをデフォルトの `display:none;に設定しました。これは画像が読み込まれたときに変更されます

CSS:

body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}