OK, en första viktig optimering är att inte skapa ett nytt jQuery-objekt för varje iteration. Måste ni förresten stödja IE6 eller räcker IE7?
// ...loop... (behöver se denna loop och hur ni tar fram item)
var el = document.getElementById('categoryImg' + item.Id);
el.setAttribute('src', item.CategoryIconSrc);
el.setAttribute('alt', item.CategoryIconAlt);
el.setAttribute('title', item.CategoryIconAlt);
// ...slut på loop...
Anledningen till att detta är snabbare än att använda jQuery, är främst för att du skapar ett nytt jQ-objekt vid varje iteration (<= 4000 gånger?). Det äter prestanda.
Notera dock att jag inte använder en kopia av gridView utan ändrar direkt i DOM, vilket orsakar tre reflows per iteration (en reflow är när webbläsaren måste rita om sidan på skärmen). Det vore bättre med något sådant här:
var gridView = document.getElementById(masterCtrlPrefix + leftContentPrefix + 'GridViewUnits'),
gridViewParent = gridView.parentNode,
gridViewClone = gridView.cloneNode(true),
trLength = gridViewClone.childNodes[0].childNodes.length; // T.ex. antal TR i denna HTML: <table><tbody><tr>
// Ta bort gridView från DOM så att webbläsaren inte behöver ha båda i minnet
gridViewParent.removeChild(gridView);
for(var i = 0; i < trLength; i++){
var tr = gridView.childNodes[0].childNodes[i],
el = tr.childNodes[0].childNodes[0]; // T.ex. en IMG i denna TR:s HTML: <tr><td><img>
// Eventuellt behövs här en loop till för att iterera igenom alla TD inuti denna TR
// Kommentera i så fall fram följande
// for(var k = 0; k < tr.childNodes.length; k++){
// var td = tr.childNodes[k],
// el = td.childNodes[0];
el.setAttribute('src', item.CategoryIconSrc);
el.setAttribute('alt', item.CategoryIconAlt);
el.setAttribute('title', item.CategoryIconAlt);
// }
}
// Skicka gridView tillbaka till webbläsaren
gridViewParent.appendChild(gridView);
Rekommenderar W3Schools tydliga instuktioner till att manipulera DOM-trädet: XML DOM Tutorial
OBS! Koden ovanför är helt tagen ur huvudet... garanterat otestad, säkert felstavad också.
