The 'load' event doesn't fire in Internet Explorer if the image is
cached, maybe that's why.
$('#photo img').bind('load readystatechange', function(e) {
if (this.complete || this.readyState == 'complete' && e.type =
'readystatechange') {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
};
});
On Feb 12, 3:32 pm, surreal5335 <surrea...@hotmail.com> wrote:
> Thanks a lot for the help, unfortunately it didnt take. One more
> thing, how could I go about getting the $('.site').fadeIn(); to
> execute after the other two have finished?
> I wish I could offer some suggestions to help spark an idea on your
> end, but I am drawing a complete blank...Which is why I am on here
> asking for help.
> So thank you very much for any other ideas you may have.
>
> On Feb 12, 3:54 am, Paul Mills <paul.f.mi...@gmail.com> wrote:
>
> > Hi,
> > Try something like this:
> > $('#photo img').load(function() {
> > $('.pic').fadeIn();
> > $('div.position').fadeOut();
> > $('.site').fadeIn();
>
> > });
>
> > The .load() event should fire when the images has loaded.
> > You don't need to remove the classes "pic" and "site" to get the fades
> > in/out to work.
> > Paul
>
> > On Feb 11, 11:17 pm,surreal5335<surrea...@hotmail.com> wrote:
>
> > > I am working making an intro page to a photo site and I need the image
> > > to fade in slowly after the site finishes loading.
>
> > > I believe I have the jquery correct but something is obviously wrong.
> > > Right the now the image is hidden, but it wont fadeIn. I am also
> > > trying to get the text "Please wait for site to load to slowly fadeOut
> > > during this, then after all thats done, fadeIn the "Enter Site" text.
>
> > > Here is the code I am using for it. So far only a few things are
> > > working properly.
>
> > > <script type="text/javascript"
> > > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
> > > jquery.min.js"></script>
>
> > > <script type="text/javascript">
>
> > > $(document).ready(function(){
>
> > > $("span").ready(function(){
> > > $(this).removeClass("pic"){
> > > $(this).fadeIn(4000);
> > > }
> > > },
> > > function() {
> > > $("div").fadeOut(6000);
> > > },
> > > function() {
> > > $("a#site").removeClass("site");
> > > $(this).fadeIn(1000);
>
> > > });
>
> > > });
>
> > > </script>
>
> > > <style type="text/css">
>
> > > a.site {display: none}
>
> > > span.pic {display: none}
>
> > > table.position {position: center}
>
> > > div.position {text-align: center}
>
> > > </style>
>
> > > </head>
> > > <body>
> > > <table border="1" class="position">
> > > <tr>
> > > <td>
> > > <span id="photo" class="pic">
> > > <img src="/test/land_scape_5.png"
> > > </span>
> > > </td>
> > > </tr>
> > > <tr>
> > > <td>
> > > <div class="position">Please wait for site to load</div>
> > > <a href="#" class="site" id="site" style="text-align: right">Enter
> > > Site</a>
> > > </td>
> > > </tr>
> > > </table>
>
> > > Here is the link to the page to see whats it giving me:
>
> > >http://royalvillicus.com/test/photo.html
>
> > > I appreciate all the help
