WordPress 技巧:让 WordPress 真正支持 jQuery Lazyload
2023-06-13 09:18:34 时间
看到很多人在网上说 jQuery lazyload 插件没效果,看了下插件主页说要把图片的地址写入 data-original 属性,loading 图片地址写入 URL 属性就能实现真正图片稍后载入(lazyload)。
如果每张图片都这么改,非常不方便,并且图片在 Feed 中也无法查看,那么我们可以通过 WordPress 强大的 filter Hook,用正则表达式重组一下 img 标签就行了。于是花了点时间写了个貌似很强大代码:
add_filter ('the_content', 'lazyload');
function lazyload($content) {
if(!is_feed()||!is_robots) {
$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"loading1.gif\"\$3>\n<noscript>\$0</noscript>",$content);
}
return $content;
}
把这段代码扔到当前主题的 functions.php
中,再把 loading1.gif 这个图片地址换成你的 loading 图片地址。再按潜行者m的这篇文章配置下站点的 jQuery 就搞定了。
相关文章
- 基于jQuery或Zepto的图片延迟加载插件
- jQuery 图片播放插件 FancyBox 和其 WordPress 插件
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jQuery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery跳房子插件hopscotch详解编程语言
- 搭建wordpress如何在Linux中安装WordPress网站(如何用linux)
- jQuery结构(位置)伪类选择器
- Jquery扩展方法
- Jquery从头学起第四讲jquery入门教程
- 基于jquery的设置页面文本框只能输入数字的实现代码
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jQuery判断密码强度实现思路及代码
- jQuery动画animate方法使用介绍
- Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
- 使用jquery实现简单的ajax
- jQuery让控件左右移动的三种实现方法
- 如何解决Jquery库及其他库之间的$命名冲突
- 基于jquery自定义的漂亮单选按钮RadioButton
- jquery如何通过name名称获取当前name的value值
- jquery选择checked在ie8普通模式下的问题
- jQuery之选项卡的简单实现
- jquery选择器排除某个DOM元素的方法(实例演示)
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jQuery提交多个表单的小技巧
- jquery+ajax实现跨域请求的方法
- jquery结合CSS使用validate实现漂亮的验证