Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.4
    • Fix Version/s: 1.5 M1
    • Component/s: core
    • Labels:
      None

      Description

      The script control.js contains the function 'addLoadEvent'. This function enables one to add multiple onload events to a page.

      There are two problems with the current function.

      1) If the <body> tag contains a 'onload' event, and the javascript is placed in the <head> of a page, the addLoadEvent does not seem to fire its events.
      2) The events added to the above function, only fires after the entire web page (including all images) have been loaded.

      An alternative approach which is used by some of the AJAX libraries (JQuery, mootools), is based on Dead Edwards code found here: http://dean.edwards.name/weblog/2006/06/again/

      There are a few available reusable scripts on the net, which provides this technique.

      The downside is that it looks like pretty nasty javascript code (or perhaps it just points to my lack of javascript knowledge

        Activity

        Hide
        Bob Schellink added a comment -

        Fix checked into trunk.

        addLoadEvent is now based on the following snippet:

        http://www.thefutureoftheweb.com/blog/adddomloadevent

        Have tested on IE6+7, Firefox2, Opera9.2 and Safari3.

        Show
        Bob Schellink added a comment - Fix checked into trunk. addLoadEvent is now based on the following snippet: http://www.thefutureoftheweb.com/blog/adddomloadevent Have tested on IE6+7, Firefox2, Opera9.2 and Safari3.
        Hide
        Malcolm Edgar added a comment -

        Hi Bob,

        OK that sounds like a fair call.

        regards Malcolm Edgar

        Show
        Malcolm Edgar added a comment - Hi Bob, OK that sounds like a fair call. regards Malcolm Edgar
        Hide
        Bob Schellink added a comment -

        Hi Malcolm,

        I have not yet updated to the new addLoadEvent script which fixes the original issue listed in the first comment.

        I will wait for 1.5 to fix this issue. I am worried other problems might crop up with the new script and postpone the release.

        Show
        Bob Schellink added a comment - Hi Malcolm, I have not yet updated to the new addLoadEvent script which fixes the original issue listed in the first comment. I will wait for 1.5 to fix this issue. I am worried other problems might crop up with the new script and postpone the release.
        Hide
        Bob Schellink added a comment -

        Upgraded to scriptaculous 1.7.0 which includes prototype 1.5.0

        Show
        Bob Schellink added a comment - Upgraded to scriptaculous 1.7.0 which includes prototype 1.5.0
        Hide
        Malcolm Edgar added a comment -

        Hi Bob,

        OK I will take your advice, do you want to upgrade this to version 1.5.

        regards Malcolm Edgar

        Show
        Malcolm Edgar added a comment - Hi Bob, OK I will take your advice, do you want to upgrade this to version 1.5. regards Malcolm Edgar
        Hide
        Bob Schellink added a comment -

        After adding a namespace, prototype still throws errors. The addLoadEvent script basically contains a stack upon which new events are pushed. When the DOM is ready the all events on the stack are executed.

        In prototype 1.4 extends the Array.shift function which is throwing the error. In later releases prototype does not extend the Array.shift function anymore.

        So my conclusion is that prototype 1.4 has a bug and we should upgrade. Also the fact that 1.4.0 cannot be downloaded from the Prototype site is an indication that upgrading is a good idea

        Note, Prototype.js file size increases significantly each release:

        1.4.0 -> 49KB
        1.5.0 -> 73KB
        1.5.1 -> 98KB
        1.6.0 -> 126KB

        1.5.0 is probably the best upgrade for now.

        Show
        Bob Schellink added a comment - After adding a namespace, prototype still throws errors. The addLoadEvent script basically contains a stack upon which new events are pushed. When the DOM is ready the all events on the stack are executed. In prototype 1.4 extends the Array.shift function which is throwing the error. In later releases prototype does not extend the Array.shift function anymore. So my conclusion is that prototype 1.4 has a bug and we should upgrade. Also the fact that 1.4.0 cannot be downloaded from the Prototype site is an indication that upgrading is a good idea Note, Prototype.js file size increases significantly each release: 1.4.0 -> 49KB 1.5.0 -> 73KB 1.5.1 -> 98KB 1.6.0 -> 126KB 1.5.0 is probably the best upgrade for now.
        Hide
        Bob Schellink added a comment -

        When I applied the addLoadEvent script:

        http://www.thefutureoftheweb.com/blog/adddomloadevent

        prototype stopped working. Upgrading prototype to the latest version fixed the issue. Obviously there was clashing between this script and prototype. Which makes we wonder if we should not look at adding a namespace to javascript that ships with Click. This should resolve any clashing with other javascript libraries.

        I don't want to hold up 1.4 release so I will move this issue to 1.5.

        For now the current addLoadEvent works, but has restrictions.

        Need to do some homework on javascript namespaces anyway.

        Show
        Bob Schellink added a comment - When I applied the addLoadEvent script: http://www.thefutureoftheweb.com/blog/adddomloadevent prototype stopped working. Upgrading prototype to the latest version fixed the issue. Obviously there was clashing between this script and prototype. Which makes we wonder if we should not look at adding a namespace to javascript that ships with Click. This should resolve any clashing with other javascript libraries. I don't want to hold up 1.4 release so I will move this issue to 1.5. For now the current addLoadEvent works, but has restrictions. Need to do some homework on javascript namespaces anyway.
        Hide
        Bob Schellink added a comment -

        Hi Harry

        Prototype is only used by one or two controls in the extras package, while the addLoadEvent javascript function is defined in control.js in Click core. I don't think Click core should have a dependency on Prototype or any other AJAX lib.

        So if Click core is to provide an addLoadEvent javascript function, a bare bones method based on the Dean Edwards work is probably best. BTW Prototype also uses the Dean Edwards method.

        Also I have discovered a slightly better script than the attached one since it preserves window.load events -> http://www.thefutureoftheweb.com/blog/adddomloadevent

        Show
        Bob Schellink added a comment - Hi Harry Prototype is only used by one or two controls in the extras package, while the addLoadEvent javascript function is defined in control.js in Click core. I don't think Click core should have a dependency on Prototype or any other AJAX lib. So if Click core is to provide an addLoadEvent javascript function, a bare bones method based on the Dean Edwards work is probably best. BTW Prototype also uses the Dean Edwards method. Also I have discovered a slightly better script than the attached one since it preserves window.load events -> http://www.thefutureoftheweb.com/blog/adddomloadevent
        Hide
        harryw added a comment -

        Bob, I think you're right to bring up this issue.

        As an alternative I would consider Prototype JavaScript framework, which is included in Click already - see here: http://www.prototypejs.org/api/event/observe for a description on how to add load events.

        Show
        harryw added a comment - Bob, I think you're right to bring up this issue. As an alternative I would consider Prototype JavaScript framework, which is included in Click already - see here: http://www.prototypejs.org/api/event/observe for a description on how to add load events.
        Hide
        Bob Schellink added a comment -

        I have attached a script which uses the technique of adding events when the DOM is loaded and ready, but before images etc is loaded.

        Also attached is an example 'test-onload1.html' showing the current addLoadEvent technique and its shortcomings.
        A second example 'test-onload2.html' shows the attached script and how it works.

        regards

        bob

        Show
        Bob Schellink added a comment - I have attached a script which uses the technique of adding events when the DOM is loaded and ready, but before images etc is loaded. Also attached is an example 'test-onload1.html' showing the current addLoadEvent technique and its shortcomings. A second example 'test-onload2.html' shows the attached script and how it works. regards bob

          People

          • Assignee:
            Bob Schellink
            Reporter:
            Bob Schellink
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development