懒惰加载背景图像Wordpress

时间:2017-02-08 11:55:01

标签: wordpress preg-replace preg-match lazy-loading jquery-lazyload

我想懒得加载背景图片 所以我需要转换

<div class="post-header post-tp-11-header" data-original="https://cdn.guest.blog/wp-content/uploads/2017/01/A-Beautiful-Message-for-Anyone-Who-is-Searching-For-Love-750x430.jpg">

static function add_background_placeholders( $content ) {
    // Don't lazyload for feeds, previews, mobile
    if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
        return $content;
    // Don't lazy-load if the content has already been run through previously
    if ( false !== strpos( $content, 'data-background' ) )
        return $content;
    preg_match_all('~\bstyle=(\'|")(.*?)background(-image)?\s*:(.*?)\(\s*(\'|")?(?<image>.*?)\3?\s*\)~i',$content,$matches);

    if( empty( $matches ) ) return $content;

    foreach( $matches[0] as $match ){
         preg_match('~\bbackground(-image)?\s*:(.*?)\(\s*(\'|")?(?<image>.*?)\3?\s*\)~i',$match,$bg);              
         $bg_less_match = str_replace( $bg[0], '', $match );             
         $data_match = 'data-background="'.$bg['image'].'" '.$bg_less_match;
         $content = str_replace( array($match.';', $match), array( $data_match, $data_match), $content);
    }

  return $content;
}

[样式可能包含两个或更多属性,只应删除背景图像属性]

我使用以下PHP itertools.islice部分使用了它,但它仅适用于 a 标记,它不适用于任何 div

{{1}}

我已尽力解决问题,但无法找到解决方案

[Mods:如果有任何问题,请更正此问题]

1 个答案:

答案 0 :(得分:1)

您的问题中的功能实际上会默认搜索 div 。我在这里测试了它:https://regex101.com/r/HunEXt/1

问题可能是您没有将正确的内容作为参数传递。

另外,请确保您要更改行

$data_match = 'data-background="'.$bg['image'].'" '.$bg_less_match;

$data_match = 'data-original="'.$bg['image'].'" '.$bg_less_match;

获取所需的数据属性。