wordpress模板添加LazyLoadxt实现延迟加载图片

作者:落知秋 | 创建时间: 2023-05-30
公司网站中有的频道页面图片很多,所以一加载页面就需要很长的时间,为了解决这个问题,只好使用JQuery插件LazyLoadxt来实现延迟加载图片,从而加快加载速度。实现完此功能之后,刚好本博客的模板D8没有此功能,所以自己手动来添加延迟加载...
wordpress模板添加LazyLoadxt实现延迟加载图片

操作方法

第一步: 实现LazyLoad步骤如下: 1.  加载JS文件(jquery.lazyloadxt.min.js)

2.  修改img标签属性 <img src="加载图片地址" data-src="图片地址" />

第二步: 修改wordpress模板 1. 导入JS文件(jquery.lazyloadxt.min.js) 通过wordpress方法add_action来对init初始化进行注册,从而导入JS文件 在模板目录下的functions.php中找到init注册方法

然后导入JS文件 wp_deregister_script( 'lazyloadxt' ); wp_register_script( 'lazyloadxt', get_template_directory_uri() . '/js/jquery.lazyloadxt.min.js', false, '3.0', dopt('d_jquerybom_b') ? true : false ); wp_enqueue_script( 'lazyloadxt' );

效果

3. 修改首页列表图片标签属性 找到模板目录下的index.php文件

找到图片列表位置(modules/sticky.php,modules/excerpt.php)

两个文件获得图片都是通过此方法(deel_thumbnail())来获得。

通过模板目录下的functions.php找到deel_thumbnail方法 然后进行修改img标签属性即可。

4. 修改内容页标签属性 找到模板目录下的page.php文件。

找到显示内容方法the_content();

然后在functions.php中找到注册方法 add_filter(‘the_content’,’deel_copyright’):

还是在functios.php中找到deel_copyright方法,(对内容进行处理方法)

然后通过正则表达式对内容中的图片进行替换处理。

效果

点击展开全文

更多推荐