0

グラフィックベースが多いサイトの場合、ユーザーが各画像のロードを1つずつ見ないようにする方法を考え出す必要がありました。そのため、ページ上のすべての画像の準備が整うまで、一種のプリローダーとして次のコードを開発しました。通常、画像のページ コンテンツの表示を遅らせるべきではないことはわかっていますが、画像はページ上の唯一のコンテンツであるため、悪意の少ない偽プリロードを選択しました。

コードは次のように機能します: ul ページ内のすべての画像を検索し、それらを var (images) に保持し、スコープ内の画像が読み込まれると親 li にフェードインします。また、画像がキャッシュからプルされているときのチェックもあります。これにより、画像自体がロードされ、ページの残りの機能がトリガーされるまで、空のボックスとしてスタイル設定された空の li の素敵な 1 つずつフェードインが作成されます。

ここでの問題: ie9 と ie10 はプロセスの途中でしか取得できず、ランダムに停止するため、ページの「読み込み」が完了せず、サイトが機能しません。いくつか試してみましたが、何が問題なのかわかりません。html と js は以下のとおりです。

画像の html (80 のうちの 2 つだけを表示:

<ul>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_1.gif" />
    <img src="_images/_spreads/_thumbs/spread-04.jpg" />
   </li>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_2.gif" />
    <img src="_images/_spreads/_thumbs/spread-05.jpg" />
   </li>
</ul>

gif はマウス オーバーで表示され、jpg はソリッド ステートです。

var images = $('.spreads').find('img');
var loadedLen;
var liLen;
var x = 0, i = 0;

images.each(function () {
        if ($(this).complete) {
            $(this).parent().animate({
                'opacity': '1'
            }, 1000);

            $(this).parent().addClass('loaded');
            checkPageState();
        } else {
            $(this).load(function () {
                $(this).parent().animate({
                    'opacity': '1'
                }, 1000);

                $(this).parent().addClass('loaded');
                checkPageState();
            });
        };

        function checkPageState() {
            //check if all images are loaded
            //if they are animate TOC in
            loadedLen = $('.spreads li.loaded').length;
            liLen = $('.spreads li').length;
            if (loadedLen === liLen) {
                showPages();
                console.log('@showPages call from checkPageState');
            } else if (loadedLen === 10) {
                //fix li height issue
                var imgHeight = $(images[4]).height() + 2;
            };
        };
    });

    function showPages() {
        var ph = $(document).height();  
        //then we call the function that will loop
        //and fade in each image until it reaches the last one
        pageTime = setTimeout(function () {
            clearTimeout(pageTime);
            fadeInEachPage();
        }, 100);

        function fadeInEachPage() {
            if (i < images.length) {
                clearTimeout(pageTime);
                //start the countdown first
                pageTime = setTimeout(function () {
                    i++;
                    fadeInEachPage();
                }, 1);

                theImage = images[i];
                $(theImage).not('.gif').animate({ 'opacity': '1' }, 800);

            } else if (i === images.length) {
                //trash collection
                //fadeInEachPage is called so frequently the program 
                //will pass else if (i === images.length) a few times
                //thus causing the text to pulse in correctly
                if( x === 0 )
                {
                    //adds listener for mouse over effect
                    addGifListener();

                    $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);

                    var inTime = setTimeout(function () {
                        clearTimeout(inTime);
                        $('#overview header h1.title').html('Thank you for purchasing the 6 Memos eBook. Simply select a chapter to enjoy full size.');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                    }, 2000);

                    var finalTitleTime = setTimeout(function() {
                        clearTimeout(finalTitleTime);
                        $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
                    }, 8000);

                    var finalFadeIn = setTimeout( function() {
                        $('#overview header h1.title').html('6 Memos');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                        clearTimeout(finalFadeIn);
                    }, 9000);

                    //trash collection
                    x++;    
                } else {
                    return;
                };

            };
        };
    };

助けてくれてありがとう！

4

1 に答える 1

0

これに対する解決策は$(this).prop('compelete');、Musa によって提案されたとおりでした。

$(this).prop('complete')orを使用$('img').prop('complete')すると、js がデプロイされたときにページに既に存在する画像ファイルをキャッチできます。一方、load() は、js がデプロイされてからロードされたかどうかのみをチェックします。

これは私がしようとしていたものでした$(this).complete();-これはAJAXに関連付けられているようで、条件を渡さなかったため、残りの画像が読み込まれて表示され、jsの前に読み込まれたものは暗闇に残されました-いわば.

于 2013-05-20T00:37:50.137 に答える