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

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

    然后导入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' );

  • 05

    效果

  • 06

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

  • 07

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

  • 08

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

  • 09

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

  • 10

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

  • 11

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

  • 12

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

  • 13

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

  • 14

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

  • 15

    效果

赞 (0)

相关推荐

  • 用Word2007为文档添加文字水印和图片水印

    一、用Word2007为文档添加文字水印 在word 2007中打开需要添加水印的文档。在“页面布局”菜单下选择“水印”，我们可以看到word 2007为我们提供了一些水印。我们可以直接选择这些现成的 ...

  • Word2007如何添加、去掉文字图片水印?

    我们在用word的时候,有些文件需要加上水印,尤其是一些紧急.保密等文件需要加水印,如何添加呢?word添加水印方法都差不多,各个版本有一点区别,下面我用word2007给大家介绍下如何操作?不会的朋 ...

  • 电脑版剪映如何给视频添加蒙版并插入图片

    电脑版剪映如何给视频添加蒙版并插入图片

    剪映是现在十分常用的一款视频编辑软件,有些新用户不知道电脑版剪映如何给视频添加蒙版并插入图片,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的剪映软件,接着根据下图箭 ...

  • 电脑版剪映如何给视频添加蒙版并插入图片删除背景

    电脑版剪映如何给视频添加蒙版并插入图片删除背景

    剪映是现在十分常用的一款视频编辑软件,有些新用户不知道电脑版剪映如何给视频添加蒙版并插入图片删除背景,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的[剪映]软件,接 ...

  • OPPO手机如何添加打印机并打印图片

    OPPO手机如何添加打印机并打印图片

    现在有很多人在使用OPPO手机,有些新用户不知道如何添加打印机并打印图片,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开[设置]窗口,接着进入[连接与共享]页面,然后根据下 ...

  • wps文字如何添加可以打印的图片背景？

    wps文字如何添加可以打印的图片背景 01 首先打开WPS的文档,点击工具栏中的"插入",然后选择"本地图片". 02 插入以后,文档就拥有背景了,如图,我们在 ...

  • WPS表格中，如何直接添加手机里面的图片？

    在制作WPS表格时,有时需要添加图片,而图片又在手机相册里面,如果将手机相册里面的图片上传到电脑,然后WPS在插入图片也是可以的,但是为了节约时间,是否可以直接在WPS表格中,添加手机里面的图片呢?答 ...

  • 易卖工控运费模板添加教程(图文)

    运费模板添加流程.让网民操作更便利 操作方法 01 第一步:登录卖家账号后点击卖家中心 02 第二步:点击运费模板 03 第三步:点击新建运费模板 04 第四步:进行模板的填写,后进行保存操作

  • 设置今日头条自营广告添加头条号、图片、图文

    今日头条是一个自媒体平台,同时也可以在帐号符合条件的下开通自营广告,按照规则所需进行添加头条号.图片或图文等相关的资料. 操作方法 01 打开并登陆今日头条帐号,登陆成功后默认打开的主页面左侧会有相关 ...