0

我制作了一些简单的图像滑块。我有小图像列表,每当单击其中一个时,我都会将目标大图像的源替换为单击(+一些操作src从服务器获取更大的图像)。

现在我想在小图像上单击以淡出大图像,并在加载新图像时将其淡入。

尝试使用此代码:

ul.find('img').click(function() {
    $('#big_image')
        .fadeOut()
        .attr('src', this.src.replace('/small/', '/big/')) // Some other src
        .load(function() {
            $(this).fadeIn();
        });
});

这样做的问题是,当浏览器缓存图像时,onclick 图像会立即加载,然后淡入淡出,看起来有点烦人。

这个:

ul.find('img').click(function() {
    $('#big_image')
        .load(function() {
            $(this).fadeIn();
        })
        .attr('src', this.src.replace('/small/', '/big/'))
        .load(function() {
            $(this).fadeIn();
        });
});

完全不褪色。

任何想法?

4

2 回答 2

1

固定与

ul.find('img').click(function() {
    $('#big_image').fadeOut(500, function() {
        $(this).attr('src', this.src.replace('/small/', '/big/'))
            .load(function() {
                $(this).fadeIn();
            });
    });
});
于 2009-12-15T20:12:29.843 回答
0

当我做这样的事情时,我使用了这个 jQuery 插件:

http://flesler.blogspot.com/2008/01/jquerypreload.html

它可以自动加载大图像并用它替换小图像。该库不会自动淡出它们,它只是切换它们,但它确实为您提供了一个句柄,以便在大图像加载完成时触发事件。

于 2009-12-15T20:10:36.417 回答