页面加载后 Jquery mega 下拉加载

发布于 2024-11-03 11:24:14 字数 2398 浏览 1 评论 0原文

这个问题可能没有解决办法。我正在使用 jquery 下拉菜单,该菜单会在 DOM 准备就绪时加载。据我了解,这意味着它会等到页面完全加载,直到准备好使用。

这对于菜单系统来说是有问题的,因为人们通常希望在加载整个页面之前立即使用菜单。

这是我的网站,您可以在其中看到这种情况的发生。 http://bit.ly/g1sn5t

这是我用于菜单的脚本

    $(document).ready(function() {


    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show();

        //Calculate width of all ul's
        (function($) { 
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {                    
                    rowWidth += $(this).width(); 
                }); 
            };
        })(jQuery); 

        if ( $(this).find(".row").length > 0 ) { //If row exists...
            var biggestRow = 0; 
            //Calculate each row
            $(this).find(".row").each(function() {                             
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
            //Set width
            $(this).find(".sub").css({'width' :biggestRow});
            $(this).find(".row:last").css({'margin':'0'});

        } else { //If row does not exist...

            $(this).calcSubWidth();
            //Set Width
            $(this).find(".sub").css({'width' : rowWidth});

        }
    }

    function megaHoverOut(){ 
      $(this).find(".sub").stop().fadeTo('fast', 0, function() {
          $(this).hide(); 
      });
    }


    var config = {    
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
         interval: 0, // number = milliseconds for onMouseOver polling interval    
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 0, // number = milliseconds delay before onMouseOut    
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
    };

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);



});

function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;

}




// JavaScript Document

无论如何都可以获取这是在其他所有内容之前加载的吗?

There may not be a fix for this. I am using a jquery drop down menu that loads when the DOM is ready. From what I understand this means it waits until the page is fully loaded until it becomes ready to be used.

This is problematic for a menu system because people want to use the menu right away often before the entire page is loaded.

Here is my site where you can see this happening.
http://bit.ly/g1sn5t

This is my script that I am using for the menu

    $(document).ready(function() {


    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show();

        //Calculate width of all ul's
        (function($) { 
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {                    
                    rowWidth += $(this).width(); 
                }); 
            };
        })(jQuery); 

        if ( $(this).find(".row").length > 0 ) { //If row exists...
            var biggestRow = 0; 
            //Calculate each row
            $(this).find(".row").each(function() {                             
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
            //Set width
            $(this).find(".sub").css({'width' :biggestRow});
            $(this).find(".row:last").css({'margin':'0'});

        } else { //If row does not exist...

            $(this).calcSubWidth();
            //Set Width
            $(this).find(".sub").css({'width' : rowWidth});

        }
    }

    function megaHoverOut(){ 
      $(this).find(".sub").stop().fadeTo('fast', 0, function() {
          $(this).hide(); 
      });
    }


    var config = {    
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
         interval: 0, // number = milliseconds for onMouseOver polling interval    
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 0, // number = milliseconds delay before onMouseOut    
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
    };

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);



});

function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;

}




// JavaScript Document

Is there anyway to get this to load before everything else?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

烟花易冷人易散 2024-11-10 11:24:14

您可以将这些脚本放在任何您想要的位置,以便准确了解您在做什么。
HTML 是按顺序渲染的,因此脚本无法获取文档后面定义的 DOM 对象或 js 变量。这就是为什么我们通常使用文档 onload 事件来执行 init 操作,因为所有元素都已加载。

在这种情况下,我想您可以在 ul#topnav 标记结束后立即放置没有 document.ready 的脚本。

You can put those scripts wherever you whant in the case of understanding exactly what you are doing.
HTML are rendered sequentially, so scripts cannot get the DOM object or js variables defined later in the document. That's why we usually use document onload event to do the init thing since all elements are loaded.

In this case, I guess you can probably put the scripts without document.ready right after the closing of ul#topnav tag.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文