WordPress如何实现图片延迟加载

介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载非常有用,可以加速网页打开速度,减轻服务器负担。WordPress如何实现图片延迟加载对于图片延迟加载功能,很多使用WordPress程序建网站的学员不会使用。下面就来介绍一下WordPress如何实现图片延迟加载。方法/步骤 图片延迟加载...

介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载非常有用,可以加速网页打开速度,减轻服务器负担。

WordPress如何实现图片延迟加载

对于图片延迟加载功能,很多使用WordPress程序建网站的学员不会使用。下面就来介绍一下WordPress如何实现图片延迟加载。

方法/步骤 图片延迟加载是基于JQUERY的,所以需要在自己网站上加载JQUERY。在底部模板footer.php中</body>标签上面加上以下的JS代码,引入JQUERY。 <scrip src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script> 下载图片延迟加载必需的jquery.lazyload.js 插件,下载地址:jquery.lazyload.min,下载好后,将它传到自己模板中的images文件夹里。 使用以下的JS代码调用jquery.lazyload.js 插件,放在</body>标签上面。 <script src=”<?php echo get_template_directory_uri(); ?>/images/jquery.lazyload.min.js”></script> <script type=”text/javascript”> $(function() { $(“img&#8221😉.lazyload({ effect:”fadeIn” }); }); </script> 所在模板里的图片都需要添加一个data-original属性。代码示例: <img data-original=”img/abc.jpg” width=”540″ height=”300″ alt=””> 除了模板文件中有图片之外,我们在发布文章时,也会插件图片。为了让文章图片也能延迟加载,需要在模板函数文件functions.php中加入以下函数代码: add_filter (‘the_content’, ‘lazyload&#8217😉; function lazyload($content) { $loadimg_url=get_bloginfo(‘template_directory&#8217😉.’/images/loading.gif’; if(!is_feed()||!is_robots) { $content=preg_replace(‘/<img(.+)src=[\’”]([^\’”]+)[\’”](.*)>/i’,”<img\$1data-original=\”\$2\” src=\”$loadimg_url\”\$3>\n<noscript>\$0</noscript>”,$content); } return $content; } 通过以上几步的修改,整个wordpress网站里的图片都可以实现延迟加载了,在学员学习怎么做网站可以自己动手操作一下,实现自己网站的延迟加载。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

Timthumb无法显示七牛等云存储图片

2023-2-16 15:50:50

wordpress教程

wordpress 根据页面类型显示每页文章篇数

2023-2-16 15:50:52

!
你也想出现在这里?立即 联系我们吧!
信息
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索