对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
1、修改 HTML 代码中需要延迟加载的 img 标签
<img class="lazy" src="img/loading.gif" data-original="example.jpg">
// 或者
<img class="lazy" data-original="example.jpg">
Typecho在主题文件 index.php 找到:
<img src="<?php echo articleThumb($this);?>" alt="<?php $this->title(); ?>">
替换:
<img class="lazy" src="<?php $this->options->themeUrl('images/loading.gif'); ?>" data-original="<?php echo articleThumb($this);?>" alt="<?php $this->title(); ?>">
2、在主题文件 footer.php 的