Preloader obrazków w jQuery

Załóżmy, że chcemy zrobić menu z efektem hover w javascripcie. Niby wszystko ok, ale po najechaniu może się zdarzyć, że obrazek gwałtownie się pojawia lub nie pojawia się na początku wcale. Psuje to efekt wizualny. Oczywiście zakładam tu, że z jakiś powodów nie używamy css stripes. Rozwiązaniem jest funkcja, która dokona preloadingu obrazków. Na przykład taka jak poniższa.

jQuery.preload = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
	jQuery("<img>").attr("src", arguments[i]);
  }
}

Zapis jQuery.preload oznacza, że dodaliśmy własną metodę do obiektu jQuery, mianowicie preload. Metoda ta sprowadza się do prostej pętli przechodzącej przez wszystkie argumenty. arguments.length oznacza liczbę wszystkich argumentów przekazanych metodzie. Potem dla każdego argumentu tworzymy obrazek (img) i dajemy mu atrybut src równy wartości argumentu. Poniżej widzimy jak użyć metody preload dla kilku obrazków.

$.preload("misc/menu_home_h.png","misc/menu_project_h.png","misc/menu_galeria_h.png","misc/menu_linki_h.png","misc/menu_kontakt_h.png");