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

公司网站中有的频道页面图片很多,所以一加载页面就需要很长的时间,为了解决这个问题,只好使用JQuery插件LazyLoadxt来实现延迟加载图片,从而加快加载速度。实现完此功能之后,刚好本博客的模板D8没有此功能,所以自己手动来添加延迟加载图片功能。 第一步: 实现LazyLoad步骤如下: 1.  加载JS文件(jquery.lazyloadxt.min.js)     2.  修改img标签属性 <img src=”加载图片地址” data-src=”图片地址” />   第二步: 修改wordpress模板 1.  本例已D8模板为例   2. 导入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. 修改内容页标签属性 … Continue reading “为wordpress模板添加LazyLoadxt实现延迟加载图片”