为什么YUI菜单会等待我的页面图像加载？

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

编辑:这是jQuery 1.3.1中确认的错误。它在jQuery 1.3.2中修复。

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

我有一个YUI菜单控件,就像这个样本一样,顶部有子菜单。

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

我尝试使用Yahoo的代码来初始化菜单:

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).

我觉得这很奇怪。我甚至尝试将代码切换到JQuery,看看是否会在图像加载完成之前进行初始化(这就是我认为应该做的$(function())。

$(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.

注意:此问题仅适用于Internet Explorer。 Firefox似乎在加载图像之前引发onContentReady事件。

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.

3 个解决方案

#1

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

您是否尝试过使用YUI的onAvailable()而不是onContentReady()?来自YUI的文档:

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.

onContentReady方法与onAvailable共享相同的语法。两种方法之间的重要区别在于onContentReady等待,直到DOM中的target元素及其nextSibling都响应getElementById。这可以保证目标元素的内容已经完全加载(除了您稍后可能通过脚本添加的任何动态内容)。如果onContentReady从未检测到nextSibling,则会触发window.load事件。

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

我的猜测是浏览器需要在nextSibling属性工作之前将图像加载到DOM上,因此onContentReady()正在等待它。

#2

for jQuery you should do this:

对于jQuery你应该这样做:

    $(document).ready(function(){


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

        oMenuBar.render();
   });

#3

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

雅虎的onContentReady(...)似乎等待图像加载由于某种原因所以我已经停止使用它。

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

另外,$(function(){})中似乎存在JQuery错误;作品

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

我试图通过这篇文章了解这个问题。

#1