非JS实现图片懒加载

起因是豆瓣电影的页面,图片太多加载慢,现代浏览器也支持loading="lazy"这个属性,也不用再搞其他的插件,所以就顺手加上了。

2021-03-14T08:56:27.png

加完之后效果显著,既然这么顺手,那就再顺手给文章页面上面加上呗,post.php

<?php $this->content(); ?>

替换成:

<?php
  $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
  $replacement = '<img loading="lazy" src="$1" alt="'.$this->title.'" title="'.$this->title.'">';
  $content = preg_replace($pattern, $replacement, $this->content);
  echo $content;
?>

这样主题里面的图片也就支持懒加载,不过,带来的副作用就是图片里面的其他属性会强制清除。具体效果可以看:青春记忆-恶魔城月下夜想曲

已有 3 条评论

  1. 回复

    现代浏览器也支持loading="lazy" ?

    游览器自带支持?不需要其他js?

    1. 王叨叨 王叨叨 [作者]
      回复

      截图上面显示的,常规的除了IE都支持了,所以放心的用吧,不支持的无非就是加载的时间久一点,影响体验。

      1. 回复

        那很不错,除了没有加载动画。。

添加新评论