Skip to content

Instantly share code, notes, and snippets.

@JasonHoffmann
Last active June 30, 2022 15:39
Show Gist options
  • Save JasonHoffmann/436e662f6cd266b26d36 to your computer and use it in GitHub Desktop.
Save JasonHoffmann/436e662f6cd266b26d36 to your computer and use it in GitHub Desktop.
<?php
class WPLazyLoadImages {
function __construct() {
// Add Our Filters and actions for the plugin
add_action('wp_enqueue_scripts', array($this, 'enqueue_lazyload'));
add_filter('the_content', array($this, 'filter_lazyload'));
add_action('wp_footer', array($this, 'footer_lazyload'));
}
function footer_lazyload() {
// Add a small bit of Javascript which tells our jQuery plugin which images to target
echo '
<script type="text/javascript">
(function($){
$("img.lazy").lazyload();
})(jQuery);
</script>
';
}
function enqueue_lazyload() {
// Make sure to load in the lazy load script
wp_enqueue_script('jquery_lazy_load', get_stylesheet_directory_uri() . '/js/jquery.lazyload.min.js', array('jquery'), '1.9.1');
}
function filter_lazyload($content) {
// Performa search for all images
return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', array($this, 'preg_replace_callback'), $content);
}
function preg_replace_callback($matches) {
// Step 1: Replace our source attribute with a placeholder, and add a "data-original" attribute with our image source
$img_replace = $img_match[1] . 'src="' . get_stylesheet_directory_uri() . '/img/grey.gif" data-original' . substr($img_match[2], 3) . $img_match[3];
// Step 2: Add the class "lazy" to the image
$img_replace = preg_replace('/class\s*=\s*"/i', 'class="lazy ', $img_replace);
// Step 3: Add a noscript tag as a fallback
$img_replace .= '<noscript>' . $img_match[0] . '</noscript>';
return $img_replace;
}
}
// Initiate Class
new WPLazyLoadImages();
@rohitp-bsf
Copy link

Hi Jason,
Above code is very helpful. Just a quick question, can we make iframes and videos lazy load by the above way?

@byyunix
Copy link

byyunix commented Feb 28, 2021

Hello I want to apply this to my black, can you help me? please see my site. https://ilanekle.net

@byyunix
Copy link

byyunix commented Feb 28, 2021

<img src="uploads/firmalogo/<?=$liste->firma_logo?>"  loading= "lazy" alt="<?=$liste->firma_adi?>" class="cover-image" style="background:#FFFFFF;height:197px;width:auto;margin-left:auto;margin-right:auto;display:block;">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment