Why am I getting a false only in IE9 for image com

问题:

I've seen this pattern used quite a bit, but it seems IE9 doesn't like it. Here is a rough idea of what my function does:

function(path){
    $("<img/>",{"src":path}).one("load",function(event,alreadyLoaded) {
        if(!alreadyLoaded) { 
            myObject.loadedImages = myObject.loadedImages || [];
            myObject.loadedImages.push(this);
        }
    // Other code here...                   
    }).each(function() {
        if(this.complete) {
            $(this).trigger("load",true);
        }
    });
}

I realize this might be a duplicate, but the suggestions I've seen aren't working: (e.g. this.readyState // returns uninitialized)

If someone could please point me in the right direction, that would be great. Thanks.

回答1:

.one() applies per element, not per src attribute or image file. So, if you create two separate image elements and call .one("load", ...) on both of them, the load event will fire for both images, even though they share a source and the image file itself is cached.

To prevent duplicates in your array, use a hash instead:

function addImage (path) { 
    $("<img/>").load(function (e) { 
        myObject.loadedImages = myObject.loadedImages || {};
        if(!this.src in myObject.loadedImages) {  
            myObject.loadedImages[this.src] = this; 
        }
    }).attr({ "src": path });
}