Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi
Last active April 7, 2016 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save s-hiroshi/2814aec646c56d38e3d88f01978ccc76 to your computer and use it in GitHub Desktop.
Save s-hiroshi/2814aec646c56d38e3d88f01978ccc76 to your computer and use it in GitHub Desktop.
WordPressでサムネイル画像へLazy Load Plugin for jQueryを設定するサンプルです。
<?php
/*
* https://github.com/tuupola/jquery_lazyload
*/
?>
<?php if ( get_post_thumbnail_id() ): ?>
<?php if ( ! is_image_dead_link( get_post_thumbnail_id() ) ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_lazyload( get_post_thumbnail_id() ); ?></a>
<?php else : ?>
<img src="<?php bloginfo( 'template_directory' ); ?>/images/common/nothumb.png"/>
<?php endif; ?>
<?php else: ?>
<img src="<?php bloginfo( 'template_directory' ); ?>/images/common/nothumb.png"/>
<?php endif; ?>
<script type="text/javascript" charset="utf-8">
$( function () {
$( "img.lazy" ).lazyload();
} );
</script>
function the_lazyload( $id ) {
$image = wp_get_attachment_image_src( $id );
$html = '<img class="lazy" data-original="' . $image[0] . '">';
echo ($html);
}
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/js/jquery.lazyload.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment