Skip to content

Preloaden Afbeeldingen met jQuery

Speedy Gonzales

Als je afbeeldingen van tevoren geladen wil hebben zoals hover afbeeldingen voor een menu bijvoorbeeld en als je dit cross browser wil werkende hebben is jQuery en Google je vriend. jQuery helpt je als uitstekende JavaScript bibliotheek en deze kan via Google als CDN geladen worden zodat je site weer een HTTP request minder heeft en dus sneller kan laden.

jQuery via Google

Laden jQuery van Google als CDN


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Je kunt natuurlijk een recentere versie nemen.

Script voor preloaden afbeeldingen

Het script om op basis van jQuery de afbeelding in een array netjes te laden bij laden van de pagina:


<script type="text/javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
//Optie 1
             //$('<img />').attr('src',this).appendTo('body').css('display','none');
// Optie 2:
//(new Image()).src = this;
//Huidige optie
            $('<img src="' + this + '" />');
});
}

// Usage:

preload([
'/pad/naar/afbeelding1-hover.png',
'/pad/naar/afbeelding2-hover.png',
'/pad/naar/afbeelding3-hover.png',
'/pad/naar/afbeelding4-hover.png',
'/pad/naar/afbeelding5-hover.png',
'/pad/naar/afbeelding6-hover.png'
]);
</script>

Gepubliceerd door Jasper Frumau op dinsdag 4 oktober 2011

Van → Development

2 Reacties
  1. Hi

    What jQuery version will support for this?

  2. Jasper permalink

    As seen in the code it was 1.3.2 at the time, but I more recent versions should work just fine.

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*