Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
IE9 + imagesLoaded() jQuery plugin cached image bug :: Fix
// *************
// 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);
@ceasterday

This comment has been minimized.

Show comment
Hide comment
@ceasterday

ceasterday Jan 24, 2013

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.

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.

@petrchutny

This comment has been minimized.

Show comment
Hide comment
@petrchutny

petrchutny Feb 16, 2013

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

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

@markdavies

This comment has been minimized.

Show comment
Hide comment
@markdavies

markdavies May 3, 2013

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.

}

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.

}
@segamoo

This comment has been minimized.

Show comment
Hide comment
@segamoo

segamoo Sep 6, 2013

Excellent solution!! Thanks! :D

segamoo commented Sep 6, 2013

Excellent solution!! Thanks! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment