Smarty: postload - 延迟加载

页面中有些内容，我们希望延迟它的加载，以优先加载和显示页面的主要内容。

希望延迟加载的内容，比如：

• 需要加载外部资源的广告代码
• 第三方平台提供的代码
• 图片，视频等相对较“重”的资源。

Smarty Block Plugin

这可以借助一个简单的PHP Smarty插件"postload"来实现：

function smarty_block_postload($params, $content, &$smarty, &$repeat){
    // only output on the closing tag
    //if(!$repeat)
    if (isset($content)) {
      return '<div class="postload" style="display:none">'.htmlentities($content).'</div>';
    }

}

JavaScript to Do the Work

上面的代码需要配合一段JavaScript代码来实现。

setTimeout(function (){ // load postload content
  $('div.postload').each(function(i,el){
     $(el).html($(el).text()).show();
  });
},300);

// TODO: remove jQuery dependency and use 'onload' event handler

上面的JavaScript代码实际上可以集成到"postload"插件的PHP代码中去。

Use the "postload" plugin

使用方法看起来是这样的

{postload}
<div class="ad-bloc">...</dvi>
<script src="point-to 3rd-party-service.js"></script>
{/postload}

其中的HTML代码会被`htmlentities`进行编码以避免被浏览器“执行”，同时设置其显示属性为"hidden"。经过JavaScript代码处理后再变回HTML代码和显示状态。

一点改进

上面的实现方式中，要显示的代码外面会被包一层"div"标签。这对"inline"元素来说会带来麻烦。

另一个问题是经过"postload"编码的HTML代码看起来比较“乱”，不够优雅，对SEO来说似乎也是偏负面影响。

借助JavaScript Template（模版）的流行用法，可以改成下面的形式。

<script id="postload-1" type="text/x-smarty-postload">
<div class="ad-bloc">...</dvi>
<script src="point-to 3rd-party-service.js"></script>
</script> 

利用的是浏览器对于不认识的"script"标签的"type"属性会忽略其内容。

相应的JavaScript代码此时可以用$script.outerHTML = $script.text()（这只是伪代码）来实现。