0

我有一个由 ajax 脚本驱动的设计。该脚本允许在需要时对某些页面进行回调。该设计是一个简单的缩略图网格，单击缩略图，新页面会滑动以显示更大的图像。我正在尝试为较大的图像使用某种预加载器，当它们加载时它们会依次淡入图像。我初始化 ajax 和回调的脚本如下所示：

$(document).ready(function () {

$("#menu ul li").slidingPage({
        easing: 'easeInOutExpo',
        speed: 1100,
        slideScroll: 'horizontal',
        top: 0,
        navigation: {
                show: false,
                nestedPagesFlows: true
        },
        callbacks: {

                loader: function () {

                    $(function () {
                        $(".fadein").fadeIn("slow");
                    });

                    $(window).load(function () {
                        $(".preload").each(function (i) {
                            $(this).delay(400 * i).fadeIn();
                        });
                    });

                }
        }
    });
})

的HTML：

<div class="fadein">
<div id="images">

<h1>Title</h1>

<div class="centre">    

<img alt="#" class="preload" src="...">
<img alt="#" class="preload" src="...">

</div>

</div>
</div>

该fadein功能按预期工作，但preload没有。预加载的图像用 CSS 隐藏，但它们从未出现，回调仅在页面刷新后调用，而不是在加载时调用，我猜这是这里的问题。老实说，我不知道为什么或者即使我正在做的事情不兼容。关于如何解决这个问题的任何建议，或者对替代方法的一些建议，也许是用 jQuery 隐藏图像？谢谢

4

1 回答 1

0

通过使用 jQuery 的.load()API 而不是window.load. 例子：

$('#selector').load(function() {
  alert('Load was performed.');
});

不确定这是否是最有效的方法，但它达到了期望的效果。

于 2012-09-25T23:34:36.413 回答