在wordpress中用data-url延迟加载替换所有src

Posted 2023-05-09

【中文标题】在wordpress中用data-url延迟加载替换所有src

【英文标题】：Replacing all scr with data-url lazyloading in wordpress

【发布时间】：2015-05-26 19:01:00

【问题描述】：

我正在使用带有 wordpress 的视频网站 和 我的lazyload就是这样工作的

<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="images/image.jpg" data-src-small="images/image.jpg"  class="tmb_img"/>

我为 wordpress 缩略图找到了答案 但是当我使用一个视频采集器来抓取多个缩略图时

图片来自插件的这种形式；

<img id="latest-196" class="img-responsive"  onmouseout="thumbStop('latest-196', 'xxxxxx/wp-content/uploads/multi-thumbs/96/', '3');" onmouseover="thumbStart('latest-196', 15, ''xxxxxx/wp-content/uploads/multi-thumbs/96/');" src="'xxxxxx/wp-content/uploads/multi-thumbs/96/196_3.jpg">

有没有办法使用任何函数将第二种类型转换为第一种类型以添加​​延迟加载？

希望你能理解我的问题，谢谢。

【参考方案1】：

您可以使用输出缓冲，如 here 解释的那样，然后使用 preg-replace 编辑您需要的内容。

所以这可能是您的图像模板：

<div id="images">
    <?php
    // start output buffering
    ob_start();
    // get the images
    $images = get_images_from_video_grabber();
    foreach ($images as $im_tag) 
        echo $im_tag;
    
    // get the buffer and end output buffering
    $output = ob_get_clean();
    // replace what you need
    $pattern = '~<img (.+)src="(.+)">~';
    $replacement = '<img \\1src="data:image/gif;base64,..." data-src="\\2">';
    $output = preg_replace($pattern, $replacement, $output);
    // echo the buffer
    echo $output;
    ?>
</div>

可能有更优雅的解决方案（使用过滤器和操作），但不知道您使用的是哪个视频采集器，我无法检查。