本文最后更新于2019年03月22日,共1113字。如有问题或建议,欢迎在文章底部留言参与讨论!

使用jQuery图片延迟加载插件jQuery.lazyload.js可延迟加载网页中的图片以加快网页载入速度。在某些情况下,它也能帮助减轻服务器负载。

jQuery.lazyload.js对于图片 <img> 标签的结构有严格的的要求,必须具备以下属性:

<img src="img/loading.gif" data-orignal="xxxx.png" />

解释一下这个结构:src 里面存放的是占位图,data-orignal 存放的才是真实的图片地址。当滚动到图片位置的时候,这个插件才会把真实的地址赋给 src ,这样图片就会加载出来。是一种延迟加载的策略。

所以必须让网页中的图片符合成这种结构,才能让图片懒加载生效。将图片属性修改成这个结构对于已经固定死的图片是比较容易的,自己改一下就可以,但是对于文章中的图片如何自动生成这种结构,却让人很头痛,总不能手动在后台编辑器添加吧,这是不人性化的!

更新:找到了一种更好的图片处理方法,具体操作方法在下方,详细原理介绍见:Typecho中HyperDown.php的妙用

↓↓ - 以下删除线内容废弃 - ↓↓

这就需要配合 ob_start() 函数开启页面缓冲区,在html输出到浏览器的时候将所有图片的 src 替换成 data-original ,同时设置原 src 为占位符,让图片符合jQuery.lazyload结构化要求,这也是最为关键的一步。

ob_start() 函数方法为开启页面缓冲区,具体含义可参见 php ob_start及其相关方法详解,这里只介绍其在Typecho中实现图片懒加载(lazyload)具体操作步骤。

1、在主题文件 header.php 的最顶部添加以下代码:

这里使用 ob_start() 函数开启页面缓冲区。

<?php ob_start(); ?>

↑↑ - 以上删除线内容废弃 - ↑↑

1、为<img>标签添加data-original自定义属性

在网站根目录下找到var\HyperDown.php

HyperDown.php中找到第349行// image,本段代码如下:

// image
$text = preg_replace_callback(
    "/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\(((?:[^\)]|\\\\\)|\\\\\()+?)\)/",
    function ($matches) use ($self) {
        $escaped = htmlspecialchars($self->escapeBracket($matches[1]));
        $url = $self->escapeBracket($matches[2]);
        $url = $self->cleanUrl($url);
        return $self->makeHolder(
            "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
        );
    },
    $text
);

将本段代码中以下一行:

"<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

修改为:

// 前面src中为占位图片(图片路径修改为自己的),data-original中为图片真实地址
"<img src=\"https://www.nanlon.cn/usr/uploads/loading.gif\" data-original=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

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>
//js出始化lazyload并设置图片显示方式
<script>$(function() {$("img").lazyload({effect: "fadeIn", threshold: 200});});</script>
//pjax开启后的pjax回调
<script type="text/javascript">
$(document).on('pjax:complete', function() {
    $("img").lazyload({
    effect: "fadeIn",
    threshold: 200
    });
});
</script>

↓↓ - 以下删除线内容废弃 - ↓↓

3、在主题文件 footer.php 最底部添加以下代码:

这里主要是使用 ob_start() 函数在后台自动处理图片结构。

对于不想懒加载的图片(比如缩略图),只需去掉该图片 <img> 标签最后 /> 前的一个空格即可

注意:占位符图片请替换为你的gif图片地址。

<?php
//图片延缓加载相关处理,替换src为data-original,并添加占位符
$echo = ob_get_contents(); //获取缓冲区内容
ob_clean(); //清除缓冲区内容,不输出到页面
$placeholder = "img/loading.gif"; //占位符图片,请替换为你的gif占位图片地址
$preg = "/<img (.*)src(.*) \/>/i"; //匹配图片正则
$replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';
print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区
ob_end_flush(); //将缓冲区输入到页面,并关闭缓存区
?>

↑↑ - 以上删除线内容废弃 - ↑↑

附:图片显示方式参数设置

$("img").lazyload({
    placeholder : "img/loading.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
    effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
    threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
    event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
    container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
    failurelimit : 10 // 图片排序混乱时
    // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
文章目录