最新公告
  • 欢迎您光临笨羊博客,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • wp主题升级到WordPress 5.5后缩略图无法加载的解决办法

    wp主题升级到WordPress 5.5后缩略图无法加载的解决办法 最后编辑:2020-10-05
    增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复

    张昊翔博客前几天升级到WordPress 5.5后,出现首页置顶幻灯片图片和缩略图无法加载的情况。具体表现未初次打开无法加载图片,部分浏览器刷新后又显示。

    产生的原因是WordPress 5.5新增加了图片的懒加载实现方式,以实现增速的目的,但是之前的主题不支持。

    WordPress 5.5 新增了图片的懒加载功能,此功能不是通过前端JS等方式去实现的,而是根据Chrome 76浏览器的新特性支持原生懒加载特性实现的,仅仅只是简单的给图片加上 loading=”lazy” 的属性。

    WordPress 5.5如何实现以及禁用图片的懒加载?

    WordPress5.5懒加载的实现方式

    WordPress 5.5 给 the_content 接口新增了 wp_filter_content_tags 函数,它主要做三件事情:

    根据图片的 ID 给没有 width 和 height 的图片标签加上这两个属性。

    根据图片的 ID 给图片标签加上 srcset 属性。

    给图片标签加上 loading=”lazy” 属性。

    其中第三点就是实现图片懒加载的,具体执行的函数是 wp_img_tag_add_loading_attr,它把前面获取的图片标签,一个个判断一下有没有 width 和 height 属性,如果有的话,就加上 loading=”lazy” 属性。

    另外 WordPress 还提供了懒加载相关的两个接口:

    wp_img_tag_add_loading_attr:loading 属性的值,默认是 lazy 就是懒加载,也可以根据 $img 改成 eager,就是立即加载。

    wp_lazy_loading_enabled:是否启用懒加载,默认是 true 启用,也可以改成 false,不用。

     

    解决办法主要有3个:

    1. 回滚到WordPress 5.4版本;
    2. 等主题更新,支持WordPress 5.5版本。
    3. 自己添加图片延迟加载功能
    4. 禁用图片延迟加载功能

    禁用WordPress 5.5 图片延迟加载功能

    全局禁用

    将下面代码添加到当前主题函数模板 functions.php 中即可。

    add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

    只禁用特定标签的图片延迟加载

    add_filter(
       'wp_lazy_loading_enabled',
       function( $default, $tag_name, $context ){
       if ( 'img' === $tag_name && 'the_content' === $context ){
        return false;
       }
        return $default;
        },
       10,
        3
    );

    其中:

    $default:布尔默认值 true

    $tag_name:要延迟加载的元素的标记名称。

    $context:指定图像上下文的可选参数。

    禁止特色图片延迟加载

    add_filter(
    'wp_img_tag_add_loading_attr',
    function( $value, $image, $context ){
    if ( 'the_content' === $context ){
    $image_url = wp_get_attachment_image_url( 67, 'medium' );
    if ( false !== strpos( $image, ' src="' . $image_url . '"' ) ) {
    return false;
    }
    }
    return $value;
    },
    10,
    3
    );

    如果使用 wp_get_attachment_image ,只需将图像的属性值设置为 : loading false

    echo wp_get_attachment_image(

    67,

    ‘medium’,

    false,

    array( ‘loading’ => false ),

    )

    插件实现

    可以通过以下两个插件实现禁用WordPress懒加载:

    Disable Lazy Loading

    Lazy Loading Feature Plugin

    猜你在找

    张昊翔博客原创文章,作者:,如若转载,请注明出处:
    1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2、分享目的仅供大家学习和交流,请不要用于商业用途!
    3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    4、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    笨羊博客 » wp主题升级到WordPress 5.5后缩略图无法加载的解决办法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    笨羊博客
    一个关注网站建设、网站模板、搜索引擎、小程序的媒体博客
    • 2020-10-05Hi,初次和大家见面了,请多关照!

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 80027422@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者