I've used this a a test to see when things load... quite different loading
times!!

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
        <head>
                <title>
                        blackout
                </title>
                <script type="text/javascript" src="../js/jquery.js"></script>
                <script type="text/javascript"
src="../plugins/debug/jquery.debug.js"></script>
                <script type="text/javascript">
                        console.time('a');
                        var blackout = $('<div style="width: 100%; height: 
100%; position:
absolute; top: 0px; left: 0px; z-index: 100; background-color:
black"></div>')
                                .prependTo($('html'));
                        $(function(){
                                console.timeEnd('a');
                                console.time('b');
                                
blackout.css('background-color','gray').debug('grayed')
                        });
                        $(window).load(function() {
                                console.timeEnd('b');
                                
blackout.fadeOut("slow",function(){blackout.remove()}).debug('done')
                        });
                </script>

        </head>
        <body>
                <h1>la la la</h1>
                <p><img src="pix/jake.jpg" width="54" height="68" border="2" 
/></p>
                <p><img src="pix/Lost%20Map.jpg" width="128" height="72" border="2" 
/></p>
                <p><img 
src="http://www.visualjquery.com/images/arrow-forward_16.gif";
border="20" /></p>
                <p><img src="../Cruella%20uses%20jQuery%3F.jpg" width="43"
height="58" border="2" /></p>
                <p><img 
src="http://banners.wunderground.com/banner/smalltemptr/US/CA/San_Francisco.gif";
/></p>

                <p><img src="http://mystatus.skype.com/balloon/jakecigar"; /></p>
<!--                 <p><img src="http://corndog.com/pancake/pumpkin"; /></p> -->
        </body>   

</html>





On 6/16/07, Erik Beeson <[EMAIL PROTECTED]> wrote:

$(document).ready(...) is when the dom and scripts are ready.
$(window).load(...) is when the layout has been calculated and all
images have been loaded. What other events might be useful?

--Erik


On 6/15/07, Ⓙⓐⓚⓔ <[EMAIL PROTECTED]> wrote:
> very interesting!
>
> what is loaded to you? loaded to me means the dom & scripts
are  ready...
> not when  images are loaded or the after css & layout  is processed.
perhaps
> we should have more events in jQuery to deal with the different times.
>
>
> On 6/15/07, Bil Corry <[EMAIL PROTECTED]> wrote:
> >
> > Via Ajaxian, interesting browser behavior:
> >
> > -----
> > Safari does not fire onload at the same time as other browsers. With
most
> browsers, they will wait until the page is loaded, all images and
> stylesheets and scripts have run, and the page has been displayed before
> they fire onload. Safari does not.
> >
> > In Safari, it seems onload fires before the page has been displayed,
> before layout has been calculated, before any costly reflows have taken
> place. It fires before images have completed loading (this can also
happen
> in rare cases in Opera, but Safari seems to do it everywhere), meaning
that
> a substantial part of the load time is not included.
> >
> > <http://www.howtocreate.co.uk/safaribenchmarks.html>
> > -----
> >
> >
> > - Bil
> >
> >
> >
>
>
>
> --
> Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ




--
Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ

Reply via email to