saber酱的抱枕

Fly me to the moon

08/29
09:58
软件

WordPress 图片懒加载插件 Simple Lazyload

WordPress 图片懒加载插件 Simple Lazyload

今天我鬼迷心窍又想给网站加上懒加载(我完全想不起来为什么会产生这个念头了),得,这一下又搭了好几个小时进去。

我先搜了相关资料,有很多相关的插件需要给图片加特定的 class,加了之后会对这些图片实行懒加载。

有些插件需要我们手动加 class,我不想这样,一个原因是麻烦,另一个原因是要处理以前发布的文章,情况复杂容易出错。

于是我找了个不需要我们手动加 class 的插件,就是今天的这个 Simple Lazyload(查看插件页面)。它在服务器输出网页源代码的时候进行了处理,自动给图片加 class。

可是我强迫症发作,要解决两个问题:

1.这个插件会影响大部分前台页面,如首页、列表页、文章页等。我只想让它影响文章页。

2.这个插件会处理页面里所有的图片,如 logo、评论区头像也会懒加载。我只想让它处理文章正文里的图片。

于是我开始去修改这个插件,一头栽进了大坑……

第一个问题好解决,WordPress 有 is_single() 函数,可以判断是不是文章页。在合适的地方加进去就好了。

第二个问题让我咬牙切齿…… 花了那么久也没能解决,最后换了思路曲线救国,勉强可以了。就这样吧。

WordPress 图片懒加载插件 Simple Lazyload

    1. saber 文章作者
      Google Chrome 68Google Chrome 68Windows 7Windows 7

      我和插件用的都是 php 原生的函数,所以我猜测是因为插件不需要截取,它在全部源码里直接替换 img 标签,而我是要截取出来进行操作。这两个动作可能有什么区别导致了这个问题。
      白名单这个类似的思路我也想过,评论区头像的 url 不是我网站的,可以区分。但是我的 logo、正文图片、js 代码里的图片都是同一个路径,不好区分。虽然也不是不能做白名单,但是针对性太强了,几乎要一个一个的指定 url…… 感觉不是个好的办法。如果能解决本文里这个问题就好了

      回复
    2. saber 文章作者
      Google Chrome 68Google Chrome 68Windows 7Windows 7

      https://segmentfault.com/q/1010000016211208
      大佬指出这是源码里的 反斜杠+数字 影响了正则的运行,所以会这样。但是我按照他的说法去匹配反斜杠,反复尝试,结果还是没有任何改变。可能是这个思路行不通,也可能是我太菜了。
      今天折腾这玩意又花了几小时无用功。现在把这个插件停了,明天尝试做白名单吧。我受不了了。

      回复
        1. saber 文章作者
          Google Chrome 68Google Chrome 68Windows 7Windows 7

          问题就在这里,出现异常的时候,已经无法单独匹配到 \ 了。自己写个有 \ 的字符串测试没问题,但是用在这个插件里还是没用。
          现在我改成了判断图片路径,也算是个白名单吧。我要是早点这样就好了,之前死磕到底浪费这么多时间

          回复