1

我创建了一个简单的图像幻灯片加载器，带有缩略图，单击时会在主舞台上加载更大的图像。我正在使用“Reel”插件在主舞台上创建全景、可旋转的“3D”图像。

这很有趣，而且在 webkit 中一切都很好。您可以在此处查看实时页面：

http://bit.ly/Rv9ks3

幻灯片放映方面是通过嵌套回调完成的。单击任何静态缩略图链接：

a) 淡出当前现有的可旋转图像

b) 作为对fadeOut() 的回调，reel 插件从图像中移除，所有事件都解除绑定，它再次被隐藏以进行良好的测量，并且 img src 被替换为新的src。

c) 然后，使用 Desandro 的imagesloaded插件测试 img 的新 src 是否已下载，主图像会淡入。

d) 作为对该淡入的回调，在新图像上调用 Reel 插件。

这就是问题所在：在 Firefox 中，淡入是发生在舞台上的旧图像的情况下。就好像旧的 src 暂时“粘住”了，这很奇怪，因为回调脚本必须按顺序执行。然后在片刻左右，图像突然更新为新图像。所以一切正常，但当我努力实现平稳过渡时，它是不稳定的。

注意：一旦所有图像都被缓存，一切都会完美运行。因此，在玩了一会儿之后，您可能需要清除 Firefox 中的缓存以重现该行为。

以下是相关代码：

$(document).ready(function () {
    $('#the-image-to-rotate').reel(); //runs the plugin
    $('#the-image-to-rotate').on('loaded', function(){  // the plugin's 'loaded' event
        $(this).data('velocity', 4); // kick off an initial velocity
    });

    $('#engraved-vase-pager a').on("click", function(event) {
        event.preventDefault();

    //build the URLS for the new img and the plug-in
        var newRelativeUrl = $(this).children('img').attr('src').slice(0,-9);
        var firstImageUrl = newRelativeUrl + "01.jpg";
        var templateUrl =  newRelativeUrl + "##.jpg";

        $('#the-image-to-rotate').fadeOut(400, function() {
            $(this).unreel()     // tear down the plugin
                   .unbind()      // remove anything lingering
                   .hide()      // hide the de-plugin'ed img
                   .attr('src', firstImageUrl);     //swap out with the new src

             $(this).imagesLoaded(function($images, $proper, $broken) {
                $(this).fadeIn(400, function() {
                    $(this).reel({
                        images:     templateUrl,
                    });
                    $(this).on('loaded', function(){
                        $(this).data('velocity', imageVelocity);
                    });
                });
            });
        });
});

Firebug 在加载以前未查看的图像时说“图像损坏或被截断”，但该消息并不是真正的描述性，因为一切正常，除了故障。您可以在我详尽的日志记录中看到，imagesloaded 显示零损坏的图像。

这让我上了树。提前感谢您的任何见解！

4

1 回答 1

0

受 Preli 在此处的评论的启发，我继续发现在为 img 设置新的实际 src 之前首先将 src 设置为空字符串 ("")会引起 Firefox 的注意，并重置加载设置，以便回调可以正确开火。我不知道为什么，但这有效。希望这可以帮助某人。

于 2012-08-30T22:15:14.087 回答