Lighter Lightbox Solution

Here is my website: http://benjaminpotter.org/.

If you haven't been there before you should get a nice, laggy popup - any idea how to thin it out and make it a bit faster?

I have set the overlay in CSS, using a background colour and got it to fade with simp开发者_JAVA技巧le jQuery:

$("$overlay_big").fadeOut(0);
$("$overlay_big").fadeIn(1000);

The problem I'm seeing there is that the pop-up comes up before the image is loaded.

If you want to wait until the image is loaded, use $(window).load(function() { ... } ) instead of $(document).ready(function() { ... } )

Try to reduce the image size if you can, and if you want to load the image faster you could either change it to an <img ... /> and move it as close to the top of as you can, or else move the CSS style with the background image to the top of the CSS file (on that count I'm only guessing that it will have an effect).