• 欢迎访问雨丝林森网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏雨丝林森吧
  • 本站所有资料来源于网络,免费分享下载,请下载后自行杀毒与测试,请保留好开发者的相关版权信息

如何实现WordPress全站图片延迟加载

其它技术 一 树 3年前 (2018-01-08) 460次浏览 已收录 0个评论 扫描二维码

 如何实现WordPress全站图片延迟加载

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

方法/步骤

  1. 图片延迟加载是基于JQUERY的,所以需要在自己网站上加载JQUERY。在底部模板footer.php中</body>标签上面加上以下的JS代码,引入JQUERY。

  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网站里的图片都可以实现延迟加载了,在学员学习怎么做网站可以自己动手操作一下,实现自己网站的延迟加载。

雨丝林森, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何实现WordPress全站图片延迟加载
喜欢 (2)
[zgcf2008@163.com]
分享 (0)

您必须 登录 才能发表评论!