public

IE9 + imagesLoaded() jQuery plugin cached image bug :: Fix

  • Download Gist
IE9_fix_for_imagesLoaded_plugin_issue.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
// *************
// Original plugin Gist: https://gist.github.com/268257
// Current repos: https://github.com/desandro/imagesloaded
// fix in response to: https://github.com/desandro/imagesloaded/issues/8
//
// In case this is useful to anyone.
// *************
 
 
/*!
* jQuery imagesLoaded plugin v1.0.4
* http://github.com/desandro/imagesloaded
*
* MIT License. by Paul Irish et al.
*/
 
(function($, undefined) {
 
// $('#my-container').imagesLoaded(myFunction)
// or
// $('img').imagesLoaded(myFunction)
 
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
 
// callback function gets image collection as argument
// `this` is the container
$.fn.imagesLoaded = function( callback ) {
var $this = this,
$images = $this.find('img').add( $this.filter('img') ),
len = $images.length,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
// some browsers (IE9) fail to trigger image loaded when using cached images
// This flag is so we can account for this dumb MSIE situation.
var can_use_cached_images = confirm_can_use_cached_images();
 
function confirm_can_use_cached_images() {
var result = 'Good browser';
var arr_known_browsers_with_issues = ['ie9'];
// block to check for specific know buggy browsers.
if ($.browser.msie) {
result = 'ie' + parseInt($.browser.version, 10); // target => IE9 ONLY at present
}
return ($.inArray(result, arr_known_browsers_with_issues) == -1); // -1 means no match found.
}
function triggerCallback() {
callback.call( $this, $images );
}
 
function imgLoaded( event ) {
if ( --len <= 0 && event.target.src !== blank ){
setTimeout( triggerCallback );
$images.unbind( 'load error', imgLoaded );
}
}
 
if ( !len ) {
triggerCallback();
}
 
$images.bind( 'load error', imgLoaded ).each( function() {
if (can_use_cached_images == false) {
this.src = this.src.split('?')[0];
}
 
// cached images don't fire load sometimes, so we reset src.
if (this.complete || typeof this.complete === "undefined"){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
this.src = blank;
this.src = src;
}
});
 
return $this;
};
 
})(jQuery);

Thank you, this cleared up an issue I was having in my code. For what it's worth I was having the issue in ie10 as well so I had to add it to the known issues array.

Thanks! It solved the problem with Masonry images not being loaded in IE9.

If you can't use $.browser because you're using jQuery 1.9 or above then this will help:

function confirm_can_use_cached_images() {
    var result = 'Good browser';
    var arr_known_browsers_with_issues = ['MSIE 10.0', 'MSIE 9.0'];

    // block to check for specific know buggy browsers.
    if (window.navigator.appName.match(/Microsoft/)) {
      result = window.navigator.appVersion.match(/MSIE [^;/]+/);
      if(result) result = result[0];
    }

    return ($.inArray(result, arr_known_browsers_with_issues) == -1);  // -1 means no match found.

}

Excellent solution!! Thanks! :D

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.