--- /dev/null
- images.each(function() {
+'use strict';
+
+import $ from 'jquery';
+
+/**
+ * Runs a callback function when images are fully loaded.
+ * @param {Object} images - Image(s) to check if loaded.
+ * @param {Func} callback - Function to execute when image is fully loaded.
+ */
+function onImagesLoaded(images, callback){
+ var self = this,
+ unloaded = images.length;
+
+ if (unloaded === 0) {
+ callback();
+ }
+
- if (this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
++ images.each(function(){
+ // Check if image is loaded
- // Force load the image
++ if (this.complete && this.naturalWidth !== undefined) {
+ singleImageLoaded();
+ }
- // fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
- var src = $(this).attr('src');
- $(this).attr('src', src + (src.indexOf('?') >= 0 ? '&' : '?') + (new Date().getTime()));
- $(this).one('load', function() {
+ else {
++ // If the above check failed, simulate loading on detached element.
++ var image = new Image();
++ // Still count image as loaded if it finalizes with an error.
++ var events = "load.zf.images error.zf.images";
++ $(image).one(events, function me(event){
++ // Unbind the event listeners. We're using 'one' but only one of the two events will have fired.
++ $(this).off(events, me);
+ singleImageLoaded();
+ });
++ image.src = $(this).attr('src');
+ }
+ });
+
+ function singleImageLoaded() {
+ unloaded--;
+ if (unloaded === 0) {
+ callback();
+ }
+ }
+}
+
+export { onImagesLoaded };