学做网站培训课程介绍

当前位置:

WordPress如何实现图片延迟加载

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

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 插件,下载好后,将它传到自己模板中的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. 除了wordpress模板文件中有图片之外,我们在发布文章时,也会插件图片。为了让文章图片也能延迟加载,需要在模板函数文件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网站里的图片都可以实现延迟加载了,在学员学习怎么做网站可以自己动手操作一下,实现自己网站的延迟加载。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111026 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在学做网站论坛之前的建站教程中,介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载特别有用,可以加速网页打开速
  • 近期有一些学做网站论坛学员学习了建站培训课程之后,自己在做图片网站。令人头痛的是图片网站由于图片太多,网站打开速度是个很大的问题,由于同时加
  • 对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。