Question

我制作了一些简单的图像滑块。我有小图像列表，每当点击其中一个图像时，我会点击目标大图像的源代码（+ 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();
        });
});

根本不会褪色。

有什么想法吗？

Answer 1

已修复

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

Answer 2

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

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

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

jQuery fadein图像改变然后加载淡出

2 个答案: