Why is YUI Menu waiting for my page images to load!?

Question

Edit: This is a confirmed bug in jQuery 1.3.1. It is fixed in jQuery 1.3.2.

---

I have a YUI menu control exactly like this sample with sub menus along the top.

I tried using Yahoo's code to initialize the menu :

YAHOO.util.Event.onContentReady("mnuTopNav", function() {

    var oMenuBar = new YAHOO.widget.MenuBar("mnuTopNav", {
        autosubmenudisplay: true,
        hidedelay: 750,
        lazyload: true
    });

    oMenuBar.render();
});

I am seeing issues with pages that have images that take time to load.

I noticed that the headings would instantly appear (Communication/Shopping/Entertainment), but that the little arrows indicating there are sub-items wouldn't appear until all images are loaded.

I thought this very strange. I even tried switching out the code to JQuery to see if would initialize before the images are done loading (thats what $(function() i thought was supposed to do).

$(function(){


        var oMenuBar = new YAHOO.widget.MenuBar("mnuTopNav", {
            autosubmenudisplay: true,
            hidedelay: 750,
            lazyload: true
        });

        oMenuBar.render();
});

To my amazement I still had the same issue. The menu would not initialize until the whole page was loaded.

It is definitely the images that are being waited for.

Note: this problem is only in internet explorer. Firefox seems to raise this onContentReady event BEFORE the images are loaded.

Can i work around this problem?

---

Edit: This is a confirmed bug in jQuery 1.3.1. It is fixed in jQuery 1.3.2.

Answer 1

for jQuery you should do this:

    $(document).ready(function(){


        var oMenuBar = new YAHOO.widget.MenuBar("mnuTopNav", {
            autosubmenudisplay: true,
            hidedelay: 750,
            lazyload: true
        });

        oMenuBar.render();
   });

Answer 2

Yahoo's onContentReady(...) seems to wait for images to load for some reason so I've stopped using that.

In addition there appears to be a JQuery bug in how $(function() { }); works

See this post by me trying to get more specifics on the issue.

Answer 3

Have you tried using YUI's onAvailable() instead of onContentReady()? From YUI's docs:

The onContentReady method shares an identical syntax with onAvailable. The material difference between the two methods is that onContentReady waits until both the target element and its nextSibling in the DOM respond to getElementById. This guarantees that the target element's contents will have loaded fully (excepting any dynamic content you might add later via script). If onContentReady never detects a nextSibling, it fires with the window.load event.

My guess is that the browser needs to load images onto the DOM before the nextSibling attribute works, so onContentReady() is waiting for that.