Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
Here is some sample code for what he is suggesting....
-- in HEAD or a stylesheet...
body.js #media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
And in your JS...
$(function() {
$("#media-gallery ul img").fadeIn(2000);
});
Then add this JS to your HTML - immediately after the BODY tag...
<body>
<script type="text/javascript">
document.documentElement.className = "js";
-OR-
$('body').addClass("js");
</script>
In theory, the images will only be hidden (1% opacity) if Javascript
is enabled, because otherwise BODY will not have the 'js' class,
therefore your CSS rule will not have any effect. Since you are adding
the class *before* the images are added to the DOM, they should load
transparent. And because they are not 'hidden' (display:none), the
images will still take up their normal space when loading, instead of
making the page 'jump' they they are made visible.
/Kevin
On Apr 28, 4:26 am, Rick Faircloth <r...@whitestonemedia.com> wrote:
> >> In the <head> you can do this:
> >> <script type="text/javascript"> document.documentElement.className =
> 'js';</script>
> >> Then you can set styles for elements as descendants of .js.
>
> Karl...will you explain a little more about what this means and perhaps give
> an
> example of its implementation? Or is there a blog or tutorial somewhere?
>
> Thanks,
>
> Rick
