Lazyload ảnh giảm thời gian tải trang
//lazy load
function add_lazy_loading_to_images($content) {
return str_replace('<img', '<img loading="lazy"', $content);
}
add_filter('the_content', 'add_lazy_loading_to_images');
function modify_image_attributes($content) {
$content = preg_replace('/<img(.*?)src=/', '<img$1data-src=', $content);
$content = preg_replace('/<img(.*?)class=/', '<img$1class="lazy ', $content);
return $content;
}
add_filter('the_content', 'modify_image_attributes');
function add_lazy_loading_script() {
echo "
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for older browsers
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
});
}
});
</script>
";
}
add_action('wp_footer', 'add_lazy_loading_script');