0

我的网站上的缩略图在加载时一次淡出。我想知道如何让页脚出现在我的缩略图之后，所以它不会立即显示并随着图像淡入而被推下。

经过一些初步研究后，我意识到我需要为我的函数添加某种回调，所以我在其中放置了一个警报，但由于某种原因，它在图像淡入后没有弹出。

<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 的回调，例如您有 10 个图像，使用 jquery：

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 回答