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

【问题标题】：Replacing all scr with data-url lazyloading in wordpress在wordpress中用data-url延迟加载替换所有src
【发布时间】：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" alt="alt text" class="tmb_img"/>

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

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

<img id="latest-196" class="img-responsive" alt="alt text" 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">

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

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

【问题讨论】：

标签： jquery wordpress image

【解决方案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>

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

【讨论】：