ぎじぎじ

http://devkick.com/lab/galleria/ の擬似サムネイル作成処理が重過ぎるので、GitHub - cho45/jsdeferred: Asynchronous library in JavaScript. Standalone and Compact. で擬似マルチスレッドさせるなどしていた。

jQuery っぽく書いていなかったのが恥ずかしくなったので、ちょっと直した。

@@ -104,22 +104,24 @@
 		$(this).addClass('galleria');
 		
 		// loop through list
-		$(this).children('li').each(function(i) {
+		var kids = $(this).children('li');
+		Deferred.loop(kids.length, function(i) {
+			var self = kids.get(i);
 			
 			// bring the scope
-			var _container = $(this);
+			var _container = $(self);
 			                
 			// build element specific options
 			var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts;
 			
 			// remove the clickNext if image is only child
-			_o.clickNext = $(this).is(':only-child') ? false : _o.clickNext;
+			_o.clickNext = $(self).is(':only-child') ? false : _o.clickNext;
 			
 			// try to fetch an anchor
-			var _a = $(this).find('a').is('a') ? $(this).find('a') : false;
+			var _a = $(self).find('a').is('a') ? $(self).find('a') : false;
 			
 			// reference the original image as a variable and hide it
-			var _img = $(this).children('img').css('display','none');
+			var _img = $(self).children('img').css('display','none');
 			
 			// extract the original source
 			var _src = _a ? _a.attr('href') : _img.attr('src');
@@ -140,7 +142,7 @@
 			$(_loader).load(function () {
 				
 				// try to bring the alt
-				$(this).attr('alt',_img.attr('alt'));
+				$(self).attr('alt',_img.attr('alt'));
 				
 				//-----------------------------------------------------------------
 				// the image is loaded, let's create the thumbnail
@@ -152,8 +154,9 @@
 				if (_a) { _a.replaceWith(_thumb); }
 				
 				if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
-					var w = Math.ceil( _img.width() / _img.height() * _container.height() );
-					var h = Math.ceil( _img.height() / _img.width() * _container.width() );
+					var width = _img.width(), height = _img.height();
+					var w = Math.ceil( width / height * _container.height() );
+					var h = Math.ceil( height / width * _container.width() );
 					if (w < h) {
 						_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
 					} else {
@@ -182,8 +185,8 @@
 				
 				// hover classes for IE6
 				_thumb.hover(
-					function() { $(this).addClass('hover'); },
-					function() { $(this).removeClass('hover'); }
+					function() { $(self).addClass('hover'); },
+					function() { $(self).removeClass('hover'); }
 				);
 				_container.hover(
 					function() { _container.addClass('hover'); },
@@ -216,6 +219,8 @@
 			    _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');
 			
 			}).attr('src', _src);
+			
+			return Deferred.wait(0.2);
 		});
 	});
 };