使用了lazyload懒加载图片
关于图片懒加载，这个lazyload.js真的是非常好用，这下不用担心文章内图片太多影响速度了！虽然使用很方便，但是过程中也遇到了一点点小问题，这里记录一下。
源码及使用方法可以到作者的GitHub上去看一下，其实原理很简单：
- 就是在要显示图片的img元素的src属性上先放一张用于等待加载的loading.gif小图片，那么默认加载网页的时候先加载的都是这张小图片，不管你页面上有几张图，都只要发送一次请求就够了
- 然后在img中自定义一个data-original属性，用来存放你真实的图片地址，当然这个属性名称是可以改的，但也要相应去修改js
- 接下来就交给js来操作了，页面加载的时候，会先将页面可见区域中的data-original的值赋给src，这样就完成了首屏的图片加载，那么位置在页面下方的其实加载的是loading.gif小图片，当页面向下滚动时，出现在可见区域中的图片src的值会一一被替换成data-original中的值，这样来完成图片的加载
思路是不是很简单？但是却节省了大量的时间，特别是当页面中图片很多的时候
让文章列表页的缩略图懒加载
代码示例，原先加载图片的方式：
<img src="https://kisxy.com/image/avatar.png">
那么使用懒加载方式的时候，加载图片的方式应变为：
<img data-original="https://kisxy.com/image/avatar.png" src="loading.gif">
当然仅仅这样是不够的，你还要引入lazyload.js：
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
然后绑定到元素，给img标签添加一个类，例如lazyload：
<img class="lazyload" data-original="https://kisxy.com/image/avatar.png" src="loading.gif">
接下来最后一步，在footer中加入以下代码，这将使得所有class为lazyload的元素被延迟加载：
<script type="text/javascript">
// 或加入某些效果
$(".lazyload").lazyload({
effect : "fadeIn",
container: $("#content")
});
</script>
其中的container中的#content是指你存放图片的容器。开始的时候我没有加这个，导致页面加载时只加载了首屏的图片，页面滚动时并没有懒加载图片，查询文档之后，原先默认生效的是针对浏览器最外层的滚动条，自定义布局中的滚动条无法被识别到，所以需要添加一个容器标识，让在特定容器中的图片实现懒加载的效果。
其中的effect的fadeIn表示渐现的效果。
让文章页中的图片懒加载
在typecho中，文章的列表页是通过while循环来输出的，所以我们只要在index.php文件中找到输出图片的部分，按照上述方法修改代码即可以实现效果。那么在文章页内的图片要怎么操作？typecho输出文章内容就是这一段：
<?php $this->content(); ?>
就输出了整个文章内容了，没有单独的img元素给你编辑，怎么办？我先去文章页查看源码，发现输出图片的位置都是以这样的代码形式来输出：
<p><img src="xxxxxxxxxxxxxxxxxxxxxx"></p>
那么其实我们是要找到修改文章内容输出时的img元素属性的方法就可以了，例如将文章中所有img段的代码修改为我们需要实现懒加载的代码格式。所以这时候需要在主题的functions.php文件中去处理了，有些主题可能没有这个文件，那么就自己新建一个。
我们可以利用php的preg_replace来正则匹配并替换正确的内容达到修改文章内容的目标，在functions.php中编辑以下代码：
<?php
function themeInit($archive)
{
if ($archive->is('single'))
{
$archive->content = image_class_replace($archive->content);
}
}
function image_class_replace($content)
{
$content = preg_replace('#<img(.*?) src="([^"]*/)?(([^"/]*)\.[^"]*)"(.*?)>#',
'<img$1 data-original="$2$3"$5 class="lazyload" src="https://kisxy.com/image/loading.gif">', $content);
return $content;
}
?>
然后刷新页面看效果吧！
Tags : lazyload
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！
已有 13 条评论