Question

我有一个由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隐藏图像？感谢

Answer 1

使用jQuery的.load() API代替window.load解决了这个问题。示例：

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

不确定它是否是最有效的方式，但它实现了欲望效果。

jQuery加载和回调无法正常工作

1 个答案: