Bazen web sayfalarımızda çeşitli miktarlarda resim dosyası kullanabilmekteyiz. Bu resim dosyaları web sitemizin arayüzünde kullandığımız doku dosyaları olabileceği gibi bir fotoğraf galerisinin dosyaları da olabilir.HTML malesef ön yükleme yapmak için müsait bir dil değil. CSS de ona keza. Zira html ile sayfaya bir resmi bağladınız ve css ile de display özelliğini none yaptığınızda browserlar (en azında firefox opera chrome gibi gelişmiş tarayıcılar) o resim içeriğini sunucudan istemeyecektir. Böylece sayfa yüklenme süresi kısaltılmış olur. Display özelliği açıldığı anda (gerek javascript ile gerekse de css hover olay seçicisiyle) o elemente linklenmiş imaj dosyası derhal sunucudan talep edilecektir.Ancak javascript ile öğeler sayfada gözükmese bile arkaplanda yüklenmelerini sağlamamız mümkündür.
Gördüğünüz gibi resimlerimizi bir seferde önce preload ettirdik, ardından lazım olduğu yerde kullandık. Ne faydası oldu derseniz.. Mesela bir resim galerisi yaptınız diyelim. 10 tane 640 x 480 resminiz olsun ve next – prev butonlarıyla geçiş yapılabilsin. Normal şartlarda her geçiş yaptığınızda gösterilecek resim sunucudan istenecek ve kullanıcı bekletilecektir.Ancak bu durumda resimlerim tamamı yüklendiği için kullanıcı resimer arasında geçiş yaptığında sanki kendi bilgisayarındaki resimlermiş gibi hızlı bir biçimde resimleri dolaşabilir. Ancak tabi ki bu sefer de ön yükleme sırasında kullanıcı bekletilecektir. İnternet hızı yüksek kullanıcılar için önemli sayılmaz bu süre ama yine de kullanırken özen göstermek gerekir.preload işlemi imajlar ile hover edilebilen öğeler için oldukça kullanışlı olabilmektedir.
