CSS & Javascript image preloader

Galen — Tue, 23 Feb 2010 07:28:30 +0000

While building a photo gallery for a client I ran into an issue where the photos took too long to load and clicking thumbnails before all the photos loaded resulted in ugly transitions.

My solution was to put a semi-transparent “shield” (containing a loading animation) over the gallery. The user will be able to see the images loading, but will be unable to click anything until all images are loaded and the shield is hidden. Here’s the finished product.

Explanation follows the code.

Here’s the html. This goes inside the div that contains your gallery.

…and the CSS:

#gallery_loader {
    position:absolute; /* Position the wrapper at the top left corner */
    top:0;
    left: 0;
    width:100%; /* cover the entire width of your gallery */
    height:100%; /* cover the entire height of your gallery */
    overflow:hidden; /* hide anything that might overflow */
    z-index:999; /* make sure the shield is on top over everything */
}
#gallery_loader div { /* the actual shield */
    position:absolute; /* Position the shield at the top left corner of the wrapper */
    top:0;
    left:0;
    width:100%; /* Take up the entire wrapper */
    height:100%; /* Take up the entire wrapper */
    background: #fff;
    opacity: .8; /* .8 = 80% opacity for all non-ie browsers*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* This and the next style are for IE */
    filter: alpha(opacity=80);
}
#gallery_loader img {
    position:relative;
    display:block; /* Need this so we can center the image */
    margin: 150px auto 0 auto; /* Set this to whatever looks good */
    padding: 30px; /* Adjust to your needs */
    background: #fff;
    border: 1px solid #333;
    -moz-border-radius:5px; /* Round corners in mozilla browsers */
    -webkit-border-radius: 5px; /* Round corners for webkit browsers */
}

Put this inside an included javascript file. This will wait until the page is loaded entirely (images and all) and then fade the loader out. Requires jquery.

$(window).bind("load", function() {
	$('#gallery_loader').fadeOut();
});

#gallery_loader is positioned absolutely and placed on top of everything else (z-index:999). It’s set to take up the entire width/height of its parent. Next comes the shield that will actually do the “blocking” of everything in the gallery. The shield is opacited and set to take up the entire width/height of the wrapper. Finally the animated loading image is loaded and centered.

As you can tell from the HTML, the actual shield is not the container of the loading animation gif. This is because the children of transparent elements can’t be more opaque than their parents. In other words if we put the loading image inside the transparent “shield” (which has an opacity of 80%) it would have a max opacity of 80%. To fix this we put the “shield” underneath the loading image and opacitate it. Here’s a good page on opacity.

Note: If you’re having issues where the loading gif isn’t loading immediately add this right after the opening of your body element

...

This will cause the loading gif to load first.

Here is where i obtained my loading gif

Button 1px “bug” in firefox

Galen — Thu, 31 Dec 2009 18:40:13 +0000

When styling a button using the sliding doors technique i found that firefox shifted the span down 1px, thus foiling the entire idea of sliding doors.

To fix it use this:

button::-moz-focus-inner { border: none;}

Ridiculous IE6 bugs – Double margin & Disappearing position:absolute near float

Galen — Wed, 15 Jul 2009 20:39:41 +0000

Today while working on a layout I encountered 2 of IE’s more ridiculous bugs: Double margin & Disappearing position:absolute near float.

Double Margin Bug

This occurs when you have a left-margin on a left-floated element, or a right margin on a right-floated element. The margin will randomly double for whatever reason. Simplest way to fix it is to put display:inline on the float

Disapearing position:absolute near float

I’m not sure of the exact circumstances for this bug, but if you have absolutely positioned elements disappearing and they are near floats you’ve probably stumbled onto it. I can’t find a non-markup fix for this unfortunately. The best fix I’ve found is to add an element between the absolutely positioned elements and the floats.

Galen Grover - Connecticut Web Developer » CSS

CSS & Javascript image preloader

Button 1px “bug” in firefox

Ridiculous IE6 bugs – Double margin & Disappearing position:absolute near float