【问题标题】:JQuery Vertical slider opening up and flicker on page load with accordion, tabs and Cufon flickeringJQuery Vertical 滑块打开并在页面加载时闪烁,手风琴,标签和 Cufon 闪烁
【发布时间】:2011-08-08 20:30:45
【问题描述】:

使用自定义 jquery 创建一个独立的滑块和一个独立的手风琴,里面有标签。这一切都在工作。但是当页面加载时如何阻止它们打开??!?!这发生在所有浏览器中,加载大约需要 2 秒!

你需要

  • 用户名:列表
  • 密码:列表

我还使用闪烁并使用新闻自动收报机,在加载页面之前,Cufon 也会闪烁。我正在使用所有页面底部的 Cufon.now() 函数。

该网站目前只是非常基本的 php,我将带有 php 的滑块包括在内,它会打开吗?

我正在使用的脚本

<!-- Scripts -->
    <script type="text/javascript" src="/assets/scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/cufon-yui.js"></script>  
    <script type="text/javascript" src="/assets/scripts/Agenda_400-Agenda_700-Agenda_italic_400-Agenda_400.font.js"></script>  
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.4/jquery.tools.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.lightbox-0.5.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.watermarkinput.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.ticker.js"></script>
    <script type="text/javascript" src="/assets/scripts/animatedcollapse.js"></script>
    <script type="text/javascript" src="/assets/scripts/facebox.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.cycle.all.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery-scripts.js"></script>
    <script type="text/javascript" src="/assets/scripts/accordion.js"></script>
        <!--[if IE 6]><script type="text/javascript" src="/assets/scripts/dd-belated-png.js">   
       </script><![endif]-->

jquery-scripts.js

//Login box
jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

// Scroll close all and back to top buttons with the page
$(window).scroll(function() {
    var top = $(this).scrollTop();

    if ($("#newsletter").length) {
        var pos = $("#newsletter").position();
        var p = pos.top - 511;

        if (top >= p) {
            top = p;
            $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
        } else {
            $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
        }
    } else {
        $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
    }
});

    $(function(){

    //font replacement


    Cufon.replace("h1:not(.nocufon),h2:not(.nocufon),h3:not(.nocufon),h4:not(.nocufon)", {hover: true});

    // Banner rotator
    $('#slider .items').cycle({
        fx: 'blindY',
        timeout: 9599
    });

    // Ticker
    $('#ticker .items').cycle({
        fx: 'fade',
        timeout: 7000
    });

    //pricing details
    $("div.pricing-more-info").hide();

    $("a.pricing-more").click(function () {
        //show details
        $(this.href.substring(this.href.indexOf("#"), this.href.length)).fadeToggle();
        return false;
    }); 

    $("div.pricing-more-info .close").click(function () {
        //hide details
        $(this).parent().fadeToggle();
        return false;
    });

    //lightboxsetup
    $(".screenshots a, .imagecaption-gallery a").lightBox();  

    //username input watermark
    $("#control-login-username").Watermark("username");
    $("#control-login-password").Watermark("password");

    // when the form is submitted
    $('#colo-quote').submit( function(){

        var reg_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/; 

        var inputcheck = $('#contact_name');
        // if field has something in it, do submit actions, otherwise write out error
        if( inputcheck.val() == '' ){
            // add class to change colour
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

        var inputcheck = $('#business_name');
        if( inputcheck.val() == '' ){
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

        var inputcheck = $('#email_address');
        if( inputcheck.val() == '' || !reg_email.test( inputcheck.val() ) ){
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

    }); 

    // Info box
    animatedcollapse.addDiv('info', 'fade=1,hide=1');
    animatedcollapse.ontoggle=function($, divobj, state){ };
    animatedcollapse.init();

    // Login box popup
    $('.facebox-link').facebox({
        closeImage: '/assets/images/control-login-toggle.gif'
    });
    $(document).bind('reveal.facebox', function() { 
        Cufon.replace("h2", {hover: true});
    });

    // Back to top button
    $('#to-top a').click(function(){
        $('html, body').animate({scrollTop: '0px'}, 300);
        return false;
    });

    // FAQ expand/collapse

    SSS_faq = {
        init : function() {
            $('div.faq .answer').not(':first').slideToggle('fast');
            $('div.faq .question').click(function() { SSS_faq.toggle(this) });
        },

        toggle : function(elt) {
            $(elt).toggleClass('active');
            $(elt).siblings('.answer').slideToggle('fast');
        }
    }

    $(function() { 
        SSS_faq.init();
    });
});
</code>

In the footer of every page I use Cufon like so
<code>
<!--[if IE]><script type="text/javascript"> Cufon.now(); </script><![endif]-->

请问有人知道如何解决和解决这个问题吗?

谢谢

【问题讨论】:

    标签: jquery css html


    【解决方案1】:

    延迟对我来说不算太糟糕 - 可能与 Internet/PC 速度有关。但是,它有点明显。

    也许

    $('.acc-container').hide();

    在开始时隐藏所有内容,然后在其余代码完成时将其淡入以查看?

    【讨论】:

    • 滑块怎么样,因为这是 Mac Firefox 3+ 上最差的
    • 加载后如何淡入?这会加快页面的加载速度还是只是将其隐藏以便人们看不到它的扩展?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-19
    • 1970-01-01
    • 2021-02-11
    • 2012-12-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多