弄个Lazyload
一直想给Blog加个懒加载，无奈各路插件装上不是不生效就是伪懒加载。
最近发现了一款jq插件可以搞，于是花点时间配置一下。
在这里记录一下。
1.编辑header.php
需要保证Jquery已经加载且版本不要太低。
增加以下内容：
|
1 |
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jq_lazyload.js"></script> |
由于该插件需要通过class名来捕捉img元素且与Wordpress 4.4开始新增的图片自动增加HTML5属性（srcset和sizes）相冲突，需要关闭该功能。
2.编辑functions.php
|
1 2 |
//wordpress禁用图片属性srcset和sizes add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) ); |
为了匹配lazyload的连接形式，添加以下内容：
|
1 2 3 4 5 6 7 8 9 |
//增加懒加载 替换图片地址 add_filter ('the_content', 'lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/img/loading.gif'; //等待加载图片位置 if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)class=[\'"]([^\'"]+)[\'"](.+)src=[\'"]([^\'"]*)[\'"](.+)alt=[\'"]([^\'"]*)[\'"](.*)width=[\'"]([^\'"]*)[\'"](.+)height=[\'"]([^\'"]*)[\'"](.*)>/i',"<img class=\"lazy \$2\" data-original=\"\$4\" src=\"$loadimg_url\" alt=\"\$6\" width=\"\$8\" height=\"\$10\" ></a>",$content); } return $content; } |
3.编辑footer.php
添加以下代码：
|
1 2 3 4 5 |
<script type="text/javascript"> $("img.lazy").lazyload({ effect : "fadeIn" //若需要关闭显示特效，将这一行删去 }); </script> |
版权声明
转载保留版权： 大D技研室 | 《弄个Lazyload》
本文链接地址：https://www.dadclab.com/archives/6728.jiecao
转载须知：如果您需要转载本文，请将版权信息，版权授权方式，以及本文的链接地址注明，谢谢合作。
记一次服务器调整 →
