个人中心
gpt4 book ai didi

javascript - 页面速度的延迟脚本

转载 作者：行者123 更新时间：2023-11-29 10:40:46 26 4
gpt4 key购买 nike

我正在尝试降低页面速度，因此尝试在两个外部 Javascript 中“延迟归因”。但是，当我使用延迟归因时，我的主要网站的视频剪辑消失了。

请告诉我如何解决这个问题。

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/earlyaccess/jejugothic.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript"  src="include/rs-plugin/js/jquery.themepunch.tools.min.js" defer></script>
<script type="text/javascript"  src="include/rs-plugin/js/jquery.themepunch.revolution.min.js" defer></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="include/rs-plugin/css/settings.css" media="screen"/>

<!-- Document Title
============================================= -->
<title>title</title>

<style>

    .revo-slider-emphasis-text {
        font-size: 64px;
        font-weight: 700;
        letter-spacing: -1px;
        font-family: 'Raleway', sans-serif;
        padding: 15px 20px;
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }

    .revo-slider-desc-text {
        font-size: 20px;
        font-family: 'Lato', sans-serif;
        width: 650px;
        text-align: center;
        line-height: 1.5;
    }

    .revo-slider-caps-text {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 3px;
        font-family: 'Raleway', sans-serif;
    }

 </style>

</head>

<body class="stretched">

<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">

    <!-- Header
    ============================================= -->
    <header id="header" class="transparent-header full-header" data-sticky-class="not-dark">


        <div id="header-wrap">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <!-- Logo
                ============================================= -->
                <div id="logo">
                    <a href="index.html" class="standard-logo" data-dark-logo="images/Logo.png"><img src="images/Logo.png" alt="Logo"></a>
                    <a href="index.html" class="retina-logo" data-dark-logo="images/Logo2.png"><img src="images/Logo2.png" alt="Logo"></a>
                </div><!-- #logo end -->

                <!-- Primary Navigation
                ============================================= -->
                <nav id="primary-menu">

                    <ul>
                        <li class="current"><a href="index.html"><div>HOME</div></a></li>    

                        <li><a href="home-greeting.html"><div>Welcome</div></a>
                            <ul>
                                <li><a href="home-greeting.html"><div>Greeting</div></a></li>                                         
                                <li><a href="home-about.html"><div>About us</div></a></li>                                     
                                <li><a href="home-staff.html"><div>Staff</div></a></li>
                                <li><a href="feature-contact.html"><div>Contact Us</div></a></li>
                                <li><a href="home-news.html"><div>News</div></a></li>                                     
                            </ul>
                        </li>

                        <li><a href="timeAndPlace.html"><div>Service</div></a>
                            <ul>
                                <li><a href="timeAndPlace.html"><div>Time</div></a></li>
                                <li><a href="galilee-calendar.html"><div>Calendar</div></a></li>
                            </ul>
                        </li>


                        <li><a href="media-video.html"><div>Media</div></a>
                            <ul>
                                <li><a href="media-video.html"><div><i class="icon-play"></i>Video</div></a></li>
                                <li><a href="media-galleries.html"><div><i class="icon-picture"></i>Gallery</div></a></li>
                            </ul>



                        </li>
                        <li><a href="ministries-prayer.html"><div>Ministries</div></a>
                            <ul>
                                <li><a href="ministries-prayer.html"><div>Pray</div></a></li>
                                <li><a href="ministries-local-missions.html"><div>Local Mission</div></a></li>
                                <li><a href="ministries-global-missions.html"><div>Global Mission</div></a></li>
                                <li><a href="ministries-outdoors.html"><div>Outdoors</div></a></li>
                            </ul>

                        </li>

                    </ul>


                </nav><!-- #primary-menu end -->

            </div>

        </div>

    </header><!-- #header end -->

    <section id="slider" class="slider-parallax revoslider-wrap clearfix">

        <!--
        #################################
            - THEMEPUNCH BANNER -
        #################################
        -->
        <div class="tp-banner-container">
            <div class="tp-banner" >
                <ul>    <!-- SLIDE  -->
                    <li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/s1-thumb.jpg"  data-saveperformance="off"  data-title="Welcome to Galilee">
                        <!-- MAIN IMAGE -->

                        <!-- LAYERS -->

                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption tp-fade fadeout fullscreenvideo"
                            data-x="0"
                            data-y="0"
                            data-speed="1000"
                            data-start="1100"
                            data-easing="Power4.easeOut"
                            data-elementdelay="0.01"
                            data-endelementdelay="0.1"
                            data-endspeed="1500"
                            data-endeasing="Power4.easeIn"
                            data-autoplay="true"
                            data-autoplayonlyfirsttime="false"
                            data-nextslideatend="true" 
                            data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%">
                        <source src='images/videos/greeting.mp4' type='video/mp4' /></video>

                        </div>

                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text uppercase"
                        data-x="350"
                        data-y="280"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800"
                        data-start="1000"
                        data-easing="easeOutQuad"
                        data-splitin="none"
                        data-splitout="none"
                        data-elementdelay="0.01"
                        data-endelementdelay="0.1"
                        data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 3;">This is</div>

                        <div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
                        data-x="270"
                        data-y="300"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800"
                        data-start="1200"
                        data-easing="easeOutQuad"
                        data-splitin="none"
                        data-splitout="none"
                        data-elementdelay="0.01"
                        data-endelementdelay="0.1"
                        data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 3;">Welcome</div>                                                
                    </li>
                </ul>

            </div>

        </div>

        <script type="text/javascript">

            var tpj=jQuery;
            tpj.noConflict();

            tpj(document).ready(function() {

                var apiRevoSlider = tpj('.tp-banner').show().revolution(
                {
                    dottedOverlay:"none",
                    delay:9000,
                    startwidth:1140,
                    startheight:700,
                    hideThumbs:200,

                    thumbWidth:100,
                    thumbHeight:50,
                    thumbAmount:3,

                    navigationType:"none",
                    navigationArrows:"solo",
                    navigationStyle:"preview4",

                    touchenabled:"on",
                    onHoverStop:"on",

                    swipe_velocity: 0.7,
                    swipe_min_touches: 1,
                    swipe_max_touches: 1,
                    drag_block_vertical: false,


                    parallax:"mouse",
                    parallaxBgFreeze:"on",
                    parallaxLevels:[8,7,6,5,4,3,2,1],
                    parallaxDisableOnMobile:"on",


                    keyboardNavigation:"on",

                    navigationHAlign:"center",
                    navigationVAlign:"bottom",
                    navigationHOffset:0,
                    navigationVOffset:20,

                    soloArrowLeftHalign:"left",
                    soloArrowLeftValign:"center",
                    soloArrowLeftHOffset:20,
                    soloArrowLeftVOffset:0,

                    soloArrowRightHalign:"right",
                    soloArrowRightValign:"center",
                    soloArrowRightHOffset:20,
                    soloArrowRightVOffset:0,

                    shadow:0,
                    fullWidth:"off",
                    fullScreen:"on",

                    spinner:"spinner0",

                    stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,

                    shuffle:"off",


                    forceFullWidth:"off",
                    fullScreenAlignForce:"off",
                    minFullScreenHeight:"400",

                    hideThumbsOnMobile:"off",
                    hideNavDelayOnMobile:1500,
                    hideBulletsOnMobile:"off",
                    hideArrowsOnMobile:"off",
                    hideThumbsUnderResolution:0,

                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    startWithSlide:0,
                    fullScreenOffsetContainer: ".header"
                });

                apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
                    if( $(window).width() > 992 ) {
                        if( $('#slider ul > li').eq(data.slideIndex-1).hasClass('dark') ){
                            $('#header.transparent-header:not(.sticky-header,.semi-transparent)').addClass('dark');
                            $('#header.transparent-header.sticky-header,#header.transparent-header.semi-transparent.sticky-header').removeClass('dark');
                            $('#header-wrap').removeClass('not-dark');
                        } else {
                            if( $('body').hasClass('dark') ) {
                                $('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
                                $('#header.transparent-header:not(.sticky-header,.semi-transparent)').find('#header-wrap').addClass('not-dark');
                            } else {
                                $('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
                                $('#header-wrap').removeClass('not-dark');
                            }
                        }
                        SEMICOLON.header.darkLogo();
                    }
                });

            }); //ready

        </script>


        <!-- END REVOLUTION SLIDER -->

    </section>

    <!-- Content
    ============================================= -->
    <section id="content">

        <div class="content-wrap">

            <div class="container clearfix">
                <div class="row clearfix">

                    <div class="col-lg-5">
                        <div class="heading-block topmargin">
                            <h1>Welcome</h1>
                        </div>
                        <p class="lead">Welcoming!!</p>
                    </div>

                    <div class="col-lg-7">

                        <div style="position: relative; margin-top: 60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
                            <img src="images/portfolio/welcome.jpg" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">

                        </div>

                    </div>

                </div>
            </div>

            <script type="text/javascript">

                jQuery(window).load(function(){

                    var $container = $('#portfolio');

                    $container.isotope({
                        transitionDuration: '0.65s',
                        masonry: {
                            columnWidth: $container.find('.portfolio-item:not(.wide)')[0]
                        }
                    });

                    $('#page-menu a').click(function(){
                        $('#page-menu li').removeClass('current');
                        $(this).parent('li').addClass('current');
                        var selector = $(this).attr('data-filter');
                        $container.isotope({ filter: selector });
                        return false;
                    });

                    $(window).resize(function() {
                        $container.isotope('layout');
                    });

                });

            </script>

        </div>

    </section><!-- #content end -->



        <!-- Copyrights
        ============================================= -->
        <div id="copyrights">

            <div class="container clearfix">

                <div class="col_half">
                    ⓒ 2014 godlovesjoe<br>

                </div>

                <div class="col_half col_last tright">
                    <div class="fright clearfix">
                        <a href="https://www.facebook.com" class="social-icon si-small si-borderless si-facebook">
                            <i class="icon-facebook"></i>
                            <i class="icon-facebook"></i>
                        </a>

                        <a href="http://www.webpage.com/" class="social-icon si-small si-borderless si-globe">
                            <i class="icon-globe"></i>
                            <i class="icon-globe"></i>
                        </a>
                    </div>

                    <div class="clear"></div>

                    <i class="icon-envelope2"></i> email-address@hotmail.com <span class="middot">&middot;</span> <i class="icon-phone-sign"></i> (+1)604-657-3937<span class="middot">&middot;</span> 
                </div>

            </div>

        </div><!-- #copyrights end -->

    </footer><!-- #footer end -->

</div><!-- #wrapper end -->

<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>

<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js" defer></script>

</body>
</html>

最佳答案

defer 的工作方式是异步加载。它应该只用于相互不依赖的 JS 脚本。

即用于加载 jquery.themepunch.tools.min.js ，你需要加载 jquery，所以 jquery不能推迟。调用var apiRevoSlider = tpj('.tp-banner').show().revolution你需要有 include/rs-plugin/js/jquery.themepunch.revolution.min.js文件已加载，因此您不能延迟它。

为了提高您网站的页面速度，我建议您采取以下措施:

  1. 您应该将所有 CSS 文件编译成一个文件，而不是拥有 10 个不同的文件。您可以使用 Grunt 或 Gulp，它们会为您完成工作。此外，您可以使用在线工具，例如:https://csscompressor.net/ .

  2. 谷歌字体。你真的需要所有这些家族字体/粗细吗？ http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic .尝试删除所有您并不真正需要的内容。

  3. 所有的JS都应该在页面底部。将以下脚本移动到页面的最底部(就在 body 关闭标记之前)。

试试这个:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" ></script>window.jQuery || document.write('<script src="/js/jquery.js"><\/script>')</script>

<script type="text/javascript" src="js/plugins.js"></script>

<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>

<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

之后，您可以拥有内联脚本:

<script>
    var tpj=jQuery;
    tpj.noConflict();
    ...

    jQuery(window).load(function() {
</script>

<script type="text/javascript">

    jQuery(window).load(function() {
        var $container = $('#portfolio');

        $container.isotope({
            transitionDuration: '0.65s',
    ....
</script>

这应该是最后一个脚本(这样可以保留defer属性) <script type="text/javascript" src="js/functions.js" defer></script>

只有这样，您的页面速度才会提高很多。将 JS 置于头部的问题在于，它将阻止页面呈现，直到它完成加载。

如果你想不断优化页面，它会变得更狡猾。您将需要使用具有依赖控制的 JS 编译器。我推荐RequireJS即使设置有点复杂。有一些工具可以帮助进行设置 ( Grunt/Gulp )。

关于javascript - 页面速度的延迟脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29763203/

26 4 0
文章推荐： javascript - 需要点击两次来加载 Modal 和 SideNav(Meteor with Materialize)
文章推荐： javascript - React - 单击按钮访问选定的选项？
文章推荐： javascript - 我应该在指令和服务之间传递数据吗？
文章推荐： javascript - Kendo 网格 - 如何通过 UP/DOWN 键盘键使整行选择可导航？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com