[IgalSt]

כמה הערות לגבי קוד ה-jQuery עצמו, כדי לשפר וליעל אותו:

1. מומלץ להשתמש ב- on

2. מומלץ בחום לעשות cache לאובייקטים של jQuery ולא לפזר דולרים על ימין ועל שמאל.

3. כדאי לשרשר מספר פעולות ביחד. אם אתה עושה על אותו האלמנט fadeIn

(4. סטיילינג: תחליט אם אתה משתמש בגרש בודד או גרשיים, ותהיה עקבי)

כך שאת הקוד שלך הייתי משנה ככה:

$('#Images').on("click", "img", function(){
	var img = $(this);
	var leftSide = $("#Left-Side");
	leftSide.fadeOut("slow", function(){
                 leftSide.fadeIn("slow");
                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));
                 $("#description").html(img.attr("alt"));
	});
});

[perfeito]

נכתב במקור על ידי IgalSt

כמה הערות לגבי קוד ה-jQuery עצמו, כדי לשפר וליעל אותו:

1. מומלץ להשתמש ב- on

2. מומלץ בחום לעשות cache לאובייקטים של jQuery ולא לפזר דולרים על ימין ועל שמאל.

3. כדאי לשרשר מספר פעולות ביחד. אם אתה עושה על אותו האלמנט fadeIn

(4. סטיילינג: תחליט אם אתה משתמש בגרש בודד או גרשיים, ותהיה עקבי)

כך שאת הקוד שלך הייתי משנה ככה:

$('#Images').on("click", "img", function(){
	var img = $(this);
	var leftSide = $("#Left-Side");
	leftSide.fadeOut("slow", function(){
                 leftSide.fadeIn("slow");
                 $("#largeImage").attr('src', img.attr("src").replace("thumbs", "newsize"));
                 $("#description").html(img.attr("alt"));
	});
});

function els () {
	var elems = {
		left: $('#Left-Side'),
		large: $('#largeImage'),
		desc: $('#description')
	};
	return (function () {
		return elems;
	}());
}

$('#Images').on("click", "img", function(){
	var self = $(this)
		,	elems = els();

	elems.left.fadeOut('slow', function () {
		var src = self.attr('src').replace('thumbs', 'newsize');
		elems.left.fadeIn('slow');
		elems.large.attr('src', src);
		elems.html(self.attr('alt'));
	});
});

אם כבר, מדברים על מהירות