带有LazyLoad JQ插件的_POST_缩略图

时间：2012-06-12 作者：johnmido

我需要修改\\u post\\u缩略图功能以在其上运行“Lazyload”，我认为有两种解决方案：

1-将参数修改为如下所示

the_post_thumbnail(\'product\', array(\'data-original\'=>$src, \'src\'=>\'grey.gif\'));
（（（不工作！））

2-仅从函数中获取图像url。。。我尝试了很多片段，但没有一个对我有用，就像这一个！

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "size" );
有什么想法吗？？

谢谢

3 个回复
最合适的回答,由SO网友:Eugene Manuilov 整理而成

如果您想对每个附件图像应用懒散加载，只需将您的hoot添加到wp_get_attachment_image_attributes 过滤器：

add_filter( \'wp_get_attachment_image_attributes\', \'wpse8170_add_lazyload_to_attachment_image\', 10, 2 );
function wpse8170_add_lazyload_to_attachment_image( $attr, $attachment ) {
    $attr[\'data-original\'] = $attr[\'src\'];
    $attr[\'src\'] = \'grey.gif\';
    return $attr;
}
或者，如果您可以使用第二种方法：

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "size" );
// add more attributes if you need
printf( \'<img src="grey.gif" data-original="%s"/>\', esc_url( $thumbnail_src[0] ) );

SO网友:RafaSashi

如果你不想使用钩子，在循环中你可以这样做：

$loop = new WP_Query( array( \'posts_per_page\' => -1 ) );
while ( $loop->have_posts() ) : $loop->the_post(); 

    global $post;
    if ( $image_id = get_post_thumbnail_id( $post->ID ) ){

        if ($src = wp_get_attachment_image_src( $image_id, \'full\' )){

                $item.= \'<img class="lazy" data-original="\' . $src[0] . \'"/>\';
        }

    }

endwhile; wp_reset_query();

SO网友:vsync

添加到模板的functions.php:

function lazyload_image( $html ) {
    $html = str_replace( \'src=\', \'data-src=\', $html );
    return $html;
}

...

add_filter( \'post_thumbnail_html\', \'lazyload_image\');
就我个人而言，我正在使用自己的lazyload插件，unveil.

结束
标签： post-thumbnails   小码农  

相关推荐