Created
December 30, 2011 10:01
-
-
Save yemster/1539102 to your computer and use it in GitHub Desktop.
IE9 + imagesLoaded() jQuery plugin cached image bug :: Fix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ************* | |
// 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you can't use $.browser because you're using jQuery 1.9 or above then this will help: