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();

For me, running Chrome 28.0.1500.95 (latest), this fiddleshows the problem. Although the code waits for all images to report completion, you can see that sometimes a partial table of images appears and the lizard appears afterward. You can also see that sometimes the image width and height are reported as zero. After lots of banging my head on the wall, I found that when the load error occurs, I have to use attr('src', ''), catch the error that results from doing so, and only then attempt to load the fallback image. Now my loader object works as expected. You can see the difference in this fiddle. Am I seeing the normal behavior, or a browser quirk, or am I doing something wrong or non-best-practice in my code?

P.S. I've read the jQuery notesfor .load() , and it does say something about cross-browser inconsistency and unreliability, but I wondered whether I'm just seeing that or actually doing something wrong, or if there's a more best-practices way to do it.

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

document.ready ではなく、window.load イベントでイメージ ハンドラー関数を呼び出すようにしてください。

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