【问题标题】:minify html output from php file, with a script使用脚本缩小 php 文件中的 html 输出
【发布时间】:2015-06-15 14:36:32
【问题描述】:

我想从 php 文件中缩小输出 html,我已按照此指南进行操作:

How to minify php page html output?

这是我的代码:

<?php

function sanitize_output($buffer) {

    $search = array(
        '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
        '/[^\S ]+\</s',  // strip whitespaces before tags, except space
        '/(\s)+/s'       // shorten multiple whitespace sequences
    );

    $replace = array(
        '>',
        '<',
        '\\1'
    );

    $buffer = preg_replace($search, $replace, $buffer);

    return $buffer;
}

ob_start("sanitize_output");

?>

页面缩小了,但主页上的滑块消失了。我有你可以在这里看到的 nivo 滑块:

https://github.com/gilbitron/nivo-slider

这是我在页面中用于 nivo 滑块的代码:

<div id="featured">
    <div id="slides">
        <div id="slider" class="nivoSlider">
            <?
            $is_first_image = TRUE;
            foreach($_info["img_slider_homepage"]["src"] as $indice=>$src)
            {
                $href       = $_info["img_slider_homepage"]["href"][$indice];
                $alt        = $_info["img_slider_homepage"]["alt"][$indice];
                $capt_id    = $_info["img_slider_homepage"]["capt_id"][$indice];
                $capt_txt   = $_info["img_slider_homepage"]["capt_txt"][$indice];
                $title      = ($capt_id
                                ? "#".$capt_id
                                : $_info["img_slider_homepage"]["title"][$indice]);

                if($href)
                {
                    ?><a href="<?=$href?>" class="<?=$is_first_image ? "" : "lazywait"?>"><img src="<?=$src?>" title="<?=$title?>" alt="<?=$alt?>" width="<?=$_info["img_slider_width"]?>" height="<?=$_info["img_slider_height"]?>"></a><?
                }
                else
                {
                    ?><img src="<?=$src?>" class="<?=$is_first_image ? "" : "lazywait"?>" title="<?=$title?>" alt="<?=$alt?>" width="<?=$_info["img_slider_width"]?>" height="<?=$_info["img_slider_height"]?>"><?
                }

                $is_first_image = FALSE;
            }
            ?>
        </div>

        <?
        foreach($_info["img_slider_homepage"]["src"] as $indice=>$src)
        {
            $capt_id    = $_info["img_slider_homepage"]["capt_id"][$indice];
            $capt_txt   = $_info["img_slider_homepage"]["capt_txt"][$indice];

            if($capt_id AND $capt_txt)
            {
                ?>
                <div id="<?=$capt_id?>" class="nivo-html-caption">
                    <?=$capt_txt?>
                </div>
                <?
            }
        }
        ?>
    </div>
</div>

这是自动输入的 html:

<body >

<div id="container"><div id="row"><div id="header_home_page"> <ul id="top-menu"><ul id="nullo" class="sf-menu"> <li><a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div> <ul> </ul> </li></ul> <li><a href="/vacanze_weekend/">Vacanze</a></li><li><a href="/matrimoni/">Matrimoni</a></li><li><a href="/meeting/">Meeting</a></li> </li><li><span class="current-lang">ita</span> | <a href="/en/" title="English - Luxury hotels and historical boutique hotels">ENG</a></li><div id="additional-info"><div id="search-form"><form action="/chi_siamo/cerca.php" id="cse-search-box"> <input type="hidden" name="cx" value="010014129502104197540:hsefbn00beg" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="25" id="searchinput"/><input type="image" src="/inc/files/images/search_btn.png" id="searchsubmit" /></form></div> <!-- end #search-form --></div></ul><div class="wrap"><div id="branding"><div class="logohome">&nbsp;</div></div> </div></div><div id="additional-info"></div></div><div id="featured"><div id="slides"><div id="slider" class="nivoSlider"><img src="/inc/files/images/slider/mntr2.jpg" class="" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/cimb1.jpg" class="lazywait" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/murl2.jpg" class="lazywait" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/pvch1.jpg" class="lazywait" title="" alt="" width="960" height="332"></div></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="/inc/script/jquery.nivo.slider.pack.js" type="text/javascript"></script><script src="/inc/script/lazyload.js" type="text/javascript"></script><script type="text/javascript">$(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: true, // Use thumbnails for Control Nav controlNavThumbsFromRel: true, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded });
});</script><div id="category-name" style="padding-top:38px;"> <div id="category-inner"> <h3>Siamo specializzati in Vacanze ed Eventi di Alto Livello<br>in dimore storiche di pregio con almeno 100 anni di storia</h3><p>Le nostre dimore storiche hanno in media solo 11 camere e ospitano un solo evento in esclusiva al giorno</p> </div></div> <!-- end .category-name --> ecc

【问题讨论】:

  • 能不能显示生成的html
  • 有没有机会在缩小和未缩小后发布相应的 html?
  • 我已经更新了第一篇文章,谢谢
  • 鉴于您在 Apache Gentoo 上运行,我强烈建议您切换到 mod_pagespeed。它将执行这种缩小并优化 Javascript、CSS 和多个静态文件。
  • 帮自己一个忙,使用现有的库来完成此类工作。仅仅去掉一些空格是不行的,因为你会给自己带来各种各样的麻烦,尤其是在你的页面中使用 javascript 时。

标签: php


【解决方案1】:

滑块消失的原因是

< script type="text/javascript">$(window).load(function() {   
$('#slider').nivoSlider({ effect: 'random', // Specify sets like: fold,fade,sliceDown' 
animSpeed: 500, // Slide transition speed pauseTime: 3000 ......

当您缩小脚本时,它基本上将所有内容插入一行。 '//Specify sets....' 之后的脚本被移到了一行,然后被注释掉了,所以这之后的所有脚本都被忽略了。

您也可以通过删除 cmets 来避免这种情况。 javascript cmets 的正则表达式可以找到here

【讨论】:

  • 谢谢,问题是一个评论,现在已经解决了,但是现在有一个小问题,当加载页面 nivoslider 在一些其他内容之后加载时,在我看到加载后 0.5 秒不显示任何内容nivoslider 类,为什么?
  • 我没有得到你的问题。 nivoslider 是否在页面加载 5 秒后加载?
  • 没有 5 秒,但大约是 0.5 秒,例如,正常页面是 ,加载页面时 不显示,但经过 0.5 秒比较, 在这种情况下是 nivoslider
  • 如果 nivoslider 在使用缩小脚本的一段时间后加载,则检查缩小脚本。在javascript-minifier.com/ 上缩小您的javascript,然后使用此脚本加载nivoslider。如果一切正常,我猜你的缩小脚本有问题。将您的缩小脚本与在线缩小的脚本进行比较。也许还必须删除其他东西。
猜你喜欢
  • 2012-06-29
  • 2011-08-06
  • 1970-01-01
  • 1970-01-01
  • 2011-09-07
  • 1970-01-01
  • 2011-05-23
  • 2018-01-21
相关资源
最近更新 更多