悠悠楠杉
Typecho实现图片懒加载(lazyload)
09/18
基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。
注意事项：
需要真正实现图片延迟加载，必须将真实图片地址写在 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 的 </body> 标签前添加如下代码：
这里主要是引入jquery.js和jquery.lazyload.js，并初始化lazyload的图片显示样式。
注意：因主题自带jquery.js，故这里未做引入！占位符图片请替换为你的gif图片地址。
<!--引入jquery.lazyload.js-->
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
//js出始化lazyload并设置图片显示方式
$(function() {$("img.lazy").lazyload({effect: "fadeIn", threshold: 200});});
//pjax开启后的pjax回调
$(document).on('pjax:complete', function() {
$("img.lazy").lazyload({
effect: "fadeIn",
threshold: 200
});
});
</script>
你好，我和你用同样的主题，默认有这种懒加载图片，造成流量很大，请问一下想取消这种懒加载机制，你知道要怎么取消吗？
你可以找到class="lazyload"把src=""删除，然后在把data-original改成src
你说的这项是指哪个页面，是index.php 还是 footer.php
可以用vscode搜索整个Joe目录文件，搜class="lazyload"，大概9个文件左右
我找到其中一行是这样：
把data-src换成src
是不是把src="" 这个全部删除？ 然后你说的“data-original”，这个没有找到，请问一下这具体要怎么修改呢？
src=""删除，把data-src换成src
对，是这样的
我搜索整个目录有5个PHP文件，然后还有6个JS文件，这些全部需要修改对吗？之前有位网友告诉我懒加载的话会预先加载好图片，提升访问速度，但缺点是我不需要查看的也会被加载，造成流量消耗（这种说法对吧？）
不用懒加载，直接就显示原图片，带宽小反而打开速度变慢
速度慢一些没关系（我先测试一下），我是想问，这样改了后是不是就能让访问流量小一些呢？
只是少loading图片的流量而已
谢谢你的耐心解释，除了PHP，JS文件里的也同样要修改是吗？
不过懒加载可以提高页面加载速度
是的，但是造成主机使用流量过大，我想取消看看。
你好，我把PHP和JS里的那段话都删除了，可流量还是比之前的主题大，日IP 500左右的情况下，旧主题每天700M左右，这款Joe主题大约要1.2G多，请问一下是不是我哪里修改不对？ 后台数据查看都是png图片访问量大，看来还是加载了很多图片造成的。
可以把图片压缩一下，还有文章的图片