WordPress如何实现图片延迟加载

在学做网站论坛之前的建站教程中，介绍过什么是图片延迟加载，又叫图片懒加载。对于网站页面上有大量图片，图片延迟加载非常有用，可以加速网页打开速度，减轻服务器负担。

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

方法/步骤

1. 图片延迟加载是基于JQUERY的，所以需要在自己网站上加载JQUERY。在底部模板footer.php中</body>标签上面加上以下的JS代码，引入JQUERY。
   <scrip src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2. 下载图片延迟加载必需的jquery.lazyload.js 插件，下载地址：jquery.lazyload.min，下载好后，将它传到自己模板中的images文件夹里。
3. 使用以下的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").lazyload({
   effect:"fadeIn"
   });
   });
   </script>
4. 所在模板里的图片都需要添加一个data-original属性。代码示例：
   <img data-original="img/abc.jpg" width="540" height="300" alt="">
5. 除了模板文件中有图片之外，我们在发布文章时，也会插件图片。为了让文章图片也能延迟加载，需要在模板函数文件functions.php中加入以下函数代码：
   add_filter ('the_content', 'lazyload');
   function lazyload($content) {
   $loadimg_url=get_bloginfo('template_directory').'/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;
   }
6. 通过以上几步的修改，整个wordpress网站里的图片都可以实现延迟加载了，在学员学习怎么做网站可以自己动手操作一下，实现自己网站的延迟加载。

标签： 代码 服务器 建网站 建站 建站教程

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。