If you have images output in custom templates or want to lazy load other images in your theme, you may pass the HTML through a filter:

//Example : 1
 	$html = '<img src="image.jpg">';
	$html .= '<p>animate lazy load image</p>';
	$html .= '<img src="img.jpg">';
	$html = apply_filters( 'animate_lazy_load_html', $html );
	echo $html;

//Example : 2
    $page_id = 1;
    $page_data = get_page( $page_id );
    echo '<h3>'. $page_data->post_title .'</h3>';
    echo apply_filters('the_content', $page_data->post_content);

//Example : 3
	$content = apply_filters( 'the_content', get_the_content() );
	$content = str_replace( ']]>;', ']]&>', $content );
    echo $content;

Advanced Features – Themes Hacks

If you want to reuse the same mechanism for your own theme’s images that are not part of posts body:

1. Make sure your image belongs to the selector scope
2. Set the src attribute of the img tag with this function helper as value get_animate_lazy_loading_image()
3. Add a “alazy” class to the img
4. Add a “lazy-src” attribute to the img tag with the original image URI
5. Set the “effect” attribute of the img tag with this function helper as value get_animate_lazy_loading_effect()

//For example instead of having:
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>"  width='290' height='160' />
 
//Rather write:

<?php if(function_exists('get_animate_lazy_loading_image')){ ?>
<img class="alazy" effect="<?php echo get_animate_lazy_loading_effect();?>" lazy-src="<?php echo home_url().'/image/ap.jpg'; ?>" src="<?php echo get_animate_lazy_loading_image(); ?>" alt="<?php the_title(); ?>"  width='160' height='290' />   
<?php } else { ?>
<img src="<?php echo home_url().'/image/ap.jpg'; ?>" alt="<?php the_title(); ?>"  width='160' height='290' />
<?php } ?>