javascript - 为什么这个 "loading message"脚本在 FF 中不起作用？(javascript)

Question

我有这个脚本，它应该在加载图像时显示文本“正在加载...”，然后在加载所有图像时将文本更改为“已加载”。我添加了一个按钮来加载新图像，以确保它也适用于动态加载的图像。

这在 Chrome 中完美运行，但在 Firefox 中，“正在加载...”文本永远不会出现。我不知道为什么会这样。页面开始加载，但并非所有图像都已加载，因此它应该创建文本“正在加载..”，但事实并非如此。然后，当所有图像加载完毕后，会出现文本“正在加载”。

我只是不明白为什么一条消息会出现而另一条消息不会出现。特别是因为在创建“正在加载...”文本之前不需要满足任何条件，所以它应该自动触发。

jsfiddle Example | Full Page Example

$(document).ready(function() {

    var checkComplete = function() {
        if($('img').filter(function() {return $('img').prop('complete');}).length == $('img').length) {
            $('.status').text('Loaded');
        } else {
            $('.status').text('Loading...');
        }
    };

    $('img').on('load',function() {
        checkComplete();
    });

    $('#button').click(function() {
        $('img.a').attr('src' , 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg');
        $('img.b').attr( 'src' , 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg');
        checkComplete();
    });

    checkComplete();
});

Answer 1

您的代码中有几个问题。

首先，checkComplete() 函数编写不正确。应该是这样的:

var checkComplete = function() {
    var imgs = $('img');
    if(imgs.filter(function() {return this.complete;}).length == imgs.length) {
        $('.status').text('Loaded');
    } else {
        $('.status').text('Loading...');
    }
};

这里的主要修复是过滤器回调需要引用 this.complete，而不是 $('img').prop('complete') 因为您正在尝试一次过滤单个项目。

其次，在更改 .src 值后，您将依赖 .complete 和 .load 正常工作。这显然是它们无法在所有浏览器中正常工作的情况之一。

解决此问题的万无一失的方法是为新图像创建一个新图像对象，在设置 .src 值之前设置 onload 处理程序，当两个 onload 处理程序都触发时，您将知道两个新图像都已加载，您可以将 DOM 中的图像替换为新图像。

这是在 FF 中运行的版本:

$(document).ready(function() {

    $('#button').click(function() {
        var imgA = new Image();
        var imgB = new Image();
        imgA.className = "a";
        imgB.className = "b";
        var loaded = 0;
        imgA.onload = imgB.onload = function() {
            ++loaded;
            if (loaded == 2) {
                $("img.a").replaceWith(imgA);
                $("img.b").replaceWith(imgB);
                $('.status').text('Loaded');
            }
        }
        // the part with adding now to the end of the URL here is just for testing purposes to break the cache
        // remove that part for deployment
        var now = new Date().getTime();
        imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
        imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
        $('.status').text('Loading...');
    });
});

工作演示:http://jsfiddle.net/jfriend00/yy7GX/

<小时/>

如果您想保留原始对象，您可以仅使用新创建的对象来预加载新图像，然后在预加载后更改 .src，如下所示:

$(document).ready(function() {

    $('#button').click(function() {
        var imgA = new Image();
        var imgB = new Image();
        var loaded = 0;
        imgA.onload = imgB.onload = function() {
            ++loaded;
            if (loaded == 2) {
                $("img.a")[0].src = imgA.src;
                $("img.b")[0].src = imgB.src;
                $('.status').text('Loaded');
            }
        }
        // the part with adding now to the end of the URL here is just for testing purposes to break the cache
        // remove that part for deployment
        var now = new Date().getTime();
        imgA.src = 'http://farm9.staticflickr.com/8545/8675107979_ee12611e6e_o.jpg?' + now;
        imgB.src = 'http://farm9.staticflickr.com/8382/8677371836_651f586c99_o.jpg?' + now;
        $('.status').text('Loading...');
    });
});

该版本的工作演示:http://jsfiddle.net/jfriend00/ChSQ5/