因为在wordpress的后台设置了一个lazyload项，准备实现全站的图片懒加载的开关，因为业务不熟练，写到哪个模块，就重新构建哪个模块的懒加载开关逻辑，这天刚好写到文章缩略图，获取到的缩略图一般是img标签，在js里面直接可以通过属性比如src啊，href啊，data-xxx啊调用到值，但php里则需要正则匹配。虽然正则的作业网上到处都有，但是懒脑筋又开始蠢蠢欲动，既然js这么方便，利用js来实现可行吗？
判断开启与关闭的逻辑应该不难，后台根据lazyload参数来判断是否加载包含lazyload的业务代码。至于图片的懒加载：
初始的时候是类似这样的：
<img src="th1.jpg">支持懒加载的时候应该是这样一个格式：
<img data-original="th2.jpg" class="lazy">懒加载成功之后的图片代码如下：
<img data-original="th1.jpg" class="lazy" src="th1.jpg">使用jquery实现图片的懒加载，只需要在懒加载语句生效之前，将图片的src地址转移给“data-original”，在添加一个“lazy”类名，就可以了。
用jquery实现这个功能尤为简单，代码如下，先全选所有符合条件的图片，交换属性后，删除src属性，最后添加一个“lazy”类名：
$('img').each(function (){
$(this).attr('data-original',$(this).attr('src')).removeAttr('src').addClass('lazy');
});因为仅通过一个本地实例验证了一下效果，实装的时候会出什么问题尚未可知。附完整实例代码，如需测试，请自备图片哦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="application/javascript"></script>
<title>无标题文档</title>
<style>
img{
width:400px;
}
</style>
</head>
<body>
<img src="th1.jpg">
<img src="th2.jpg">
<img src="th3.jpg">
<img src="th4.jpg">
<img src="th5.jpg">
<img src="th6.jpg">
<img src="th7.jpg">
<img src="th8.jpg">
<img src="th9.jpg">
<img src="th10.jpg">
<img src="th11.jpg">
<img src="th12.jpg">
<img src="th13.jpg">
<img src="th14.jpg">
<img src="th15.jpg">
</body>
<script>
$('img').each(function (){
$(this).attr('data-original',$(this).attr('src')).removeAttr('src').addClass('lazy');
});
var c=0;
$(function() {
$("img.lazy").lazyload({
effect: "fadeIn",
});
});
</script>
</html>