Imaginons que nous avons ceci :

#my_link { background: url(img.png); }
#my_link:hover, #my_link:focus { background: url(img_2.png); }

Lorsque l'événement "hover" sera déclanché, il y aura un temps de décalage entre l'action et l'affichage de la nouvelle image. Ce temps est le temps que le navigateur mettra pour récupérer cette image. 

Pour éviter ce décalage, il est possible de précharger les images que l'on veut, en ajoutant dans votre HTML : 

<div id="preloader">
    <img src="img_2.png" alt="img_2">
</div>

Et dans votre CSS :

#preloader {
    height:1px;
    width:1px;
    overflow:hidden;
    position:absolute;
    top:-1000px;
}

Vous pouvez bien sûr ajouter autant d'images que vous avez besoin dans #preloader.

Lorsque l'on veut récupérer la hauteur d'un objet du DOM avec jQuery, on écrit par exemple cela :

$(document).ready(function() {
        
	var obj = $("#an_id");
	var height = obj.css("height");
}

Or, il arrive que l'on obtienne de fausses valeurs, cela vient du fait qu'actuellement Opera déclanche l'événement "DOM ready" avant que les CSS externes soient chargées.

Afin de résoudre ce problème, il faut travailler sur les dimensions dans le callback de $(window).load() :

$(document).ready(function() {

	$(window).load(function(){
		var obj = $("#an_id");
		var height = obj.css("height");
	});
}

Pour teminer, il peut arriver que la fonction .css("height") retourne la valeur "auto" sous Internet Explorer. Il suffira de rajouter une ligne pour prévenir ce cas :

$(document).ready(function() {

	$(window).load(function(){
                
		var obj = $("#an_id");
		var height = obj.css("height");
		if(height == "auto") height = obj.height();
	});
}

Inspiré par un tweet, je vous propose une façon de faire pour passer d'une liste HTML à une phrase "lisible" via des règles CSS :

li{ display: inline; list-style-type: none; }
li:after{ content: ", "; }
li:last-child:before{ content: "et "; }
li:last-child:after{ content: "."; }