Preload Next Image in Thickbox

Thickbox is a great image viewer plugin for jQuery. This post is to show how to preload the next image in Thickbox. My example is for wordpress, my version is .

1. Open /wp-includes/js/thickbox/thickbox.js

2. Around line 106, replace the following lines:

imgPreloader = new Image();
imgPreloader.onload = function(){};
imgPreloader.onload = null;

with:

imgPreloader = new Image();
prevImg = new Image();
nextImg = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;

var tb_links = jQuery('a[class="thickbox"]');
var i = -1;
tb_links.each(function(n) { if (this.href == imgPreloader.src) { i = n; } });


if (i != -1) {
	if (i>0) { prevImg.src = tb_links[i-1].href; }
	if ( i + 1 < tb_links.length) { 
		var imgTemp = new Image();
		imgTemp.src = tb_links[i+1].href; 
	
		if( i + 2 < tb_links.length )
		{
			var imgTemp2 = new Image();
			imgTemp2.src = tb_links[i+2].href; 
			
			if( i + 3 < tb_links.length )
			{
				var imgTemp3 = new Image();
				imgTemp3.src = tb_links[i+3].href; 
			}
		}
	}
}

The code will preload 3 following images, it shall be very smooth for gallery view.

Upload and have fun.  🙂