非JS实现图片懒加载
起因是豆瓣电影的页面,图片太多加载慢,现代浏览器也支持loading="lazy"
这个属性,也不用再搞其他的插件,所以就顺手加上了。
加完之后效果显著,既然这么顺手,那就再顺手给文章页面上面加上呗,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;
?>
这样主题里面的图片也就支持懒加载,不过,带来的副作用就是图片里面的其他属性会强制清除。具体效果可以看:青春记忆-恶魔城月下夜想曲
现代浏览器也支持loading="lazy" ?
游览器自带支持?不需要其他js?
截图上面显示的,常规的除了IE都支持了,所以放心的用吧,不支持的无非就是加载的时间久一点,影响体验。
那很不错,除了没有加载动画。。