0

尝试学习javascript、jQuery等。编写了一个图像加载器对象，尝试加载图像，如果加载错误，则加载不同的图像。在 Chrome（适用于 Mac）上，但不是在 Safari 或 Firefox 上，我发现在加载错误后，当我请求不同的图像时，Chrome 会在实际完成之前报告加载已完成。我正在做的事情的缩写版本：

(function() {
    "use strict";

    RG.ImageReloader = {
        create: function($img, inUseThisFlower, inUseThisLizard, inSuccessCallback) {

            return Object.create(ImageReloader.prototype,
                {   '$img'              : { 'value': $img },
                    'useThisFlower'     : { 'value': inUseThisFlower },
                    'useThisLizard'     : { 'value': inUseThisLizard },
                    'successCallback'   : { 'value': inSuccessCallback }
                });
        }
    };

    var flushCache = function(url) {
        return url + '?' + new Date().getTime();
    };

    RG.ImageReloader.prototype = {

    go: function() {
        var that = this;

        this.$img.on('load', function() { that.success(); }).on('error', function() { that.error(); });
        this.$img.attr('src', flushCache(this.useThisFlower));
    },

    error: function() {
        this.$img.attr('src', flushCache(this.useThisLizard));
    },

    success: function() {
        this.$img.off('load error');
        this.successCallback.call(this.$img);
    }

    };

}());

var r = RG.ImageReloader.create($('img'), someFlowerImage, someLizardImage, imageReady);
r.go();

对我来说，运行 Chrome 28.0.1500.95（最新），这个小提琴显示了问题。尽管代码等待所有图像报告完成，但您可以看到有时会出现部分图像表，然后会出现蜥蜴。您还可以看到，有时图像的宽度和高度报告为零。经过大量的撞墙后，我发现当发生加载错误时，我必须使用attr('src', '')，捕获这样做导致的错误，然后才尝试加载后备图像。现在我的加载器对象按预期工作。您可以在这个 fiddle中看到不同之处。我看到的是正常行为，还是浏览器怪癖，还是我在代码中做错了什么或非最佳实践？

PS我已经阅读了jQuery注释，.load()它确实说明了跨浏览器的不一致和不可靠性，但我想知道我是否只是看到了这一点，或者实际上做错了什么，或者是否有更好的最佳实践方法来做它。

4

2 回答 2

0

这似乎没有答案，但我在评论中读到另一个问题的答案，这个 Chrome OSX 错误的来源已解决

if(newImg.complete || newImg.readyState === 4) {
     newImg.onload();
}

img 被分配到哪里img = new Image();

不是 JQuery 专家，但这应该为您指明正确的方向:-)

于 2014-07-07T16:57:20.003 回答
0

尝试在 window.load 事件中调用图像处理函数，而不是在 document.ready 中：

$(window).load(function(){
//Handle images after they loaded
});
于 2013-09-16T16:51:57.363 回答