0

サイトのサムネイル画像がロード時に 1 つずつフェードインします。サムネイルの後にフッターを表示する方法を知りたいのですが、すぐには表示されず、画像がフェードインすると押し下げられます。

最初の調査の後、関数に何らかのコールバックを追加する必要があることに気付いたので、アラートを配置しましたが、画像がフェードインした後に何らかの理由でポップアップしません。

<script type="text/javascript">

    $(window).load(function() {
        var images = $('figure');
        var imageCount = images.length;
        var count = 0;

        var fadeImages = function(image, callback) {
            $(image).fadeIn(170, function() {
                // Increase the count.
                count++;
                if (images[count]) {
                    // Pass the callback to the recursively called function.
                    fadeImages(images[count], callback);
                }
            });

            // Make sure that we're only calling the callback once the images have all loaded.
            if (typeof callback === 'function' && count === imageCount) { 
                callback.call(this); // brings the scope to the callback
            }
        };

        fadeImages(images[0], function() {
            alert('Load footer');  // your callback here
        });
    });
 </script>

ここの私のウェブサイトで私が何を意味するかを見るでしょう。

私の主な質問は次のとおりです。

1) 画像がロードされた後にコールバック関数を実行するにはどうすればよいですか?

2）画像がフェードインした後にフッターを表示するために何を書くべきか、誰かが私を正しい方向に向けることができますか？

どんな助けでも大歓迎です！

4

2 に答える 2

1

すべての画像で onload と呼ばれるコールバックをバインドする必要があります。たとえば、jquery を使用して 10 個の画像があります。

var imagesLoaded = 0;
    // alter this selector to match only your images you want to wait for
    $("img").load(function() {
       imagesLoaded++;
       if(imagesLoaded == 10) {
          // all 10 images are loaded, show footer
       }
});
于 2012-08-15T12:59:08.887 に答える
0

すべての画像がロードされた後にのみ、コールバックを呼び出してみてください。

編集: このコードの動作を示すJSFiddle 。

var images = $('figure');
var imageCount = images.length;
var count = 0;

var fadeImages = function(image, callback) {
    $(image).fadeIn(170, function() {
        // Increase the count.
        count++;
        if (images[count]) {
            // Pass the callback to the recursively called function.
            fadeImages(images[count], callback);
        }
    });

    // Make sure that we're only calling the callback once the images have all loaded.
    if (typeof callback === 'function' && count === imageCount - 1) { 
        callback.call(this); // brings the scope to the callback
    }
};

fadeImages(images[0], function() {
    alert('Load footer');  // your callback here
});
于 2012-08-15T13:02:24.293 に答える