function get_srcset($image_id, $attributes = array(), $lazy = true) {
if (empty($image_id)) {
return '';
}
if (is_array($image_id)) {
$image_id = $image_id['ID'];
}
if ($lazy == true) {
if (!empty($attributes['class'])) {
if (strpos($attributes['class'], 'lazy') !== true) {
$attributes['class'] .= ' lazy';
}
} else {
$attributes['class'] = 'lazy';
}
}
$srcset = wp_get_attachment_image($image_id, 'full', 0, $attributes);
$mobile_srcset = wp_get_attachment_image_src($image_id, 'mobile');
if ($lazy == true) {
$srcset = str_replace('src="', 'data-src="', $srcset);
$srcset = str_replace('srcset="', 'data-srcset="', $srcset);
if (!empty($mobile_srcset)) {
$srcset = str_replace('data-srcset="', 'data-srcset="' . $mobile_srcset[0] . ' 500w, ', $srcset);
}
$srcset = str_replace('<img ', '<img src="' . wp_get_attachment_image_src($image_id, 'pixel')[0] . '"', $srcset);
} else {
$srcset = str_replace('loading="lazy"', '', $srcset);
if (!empty($mobile_srcset)) {
$srcset = str_replace('srcset="', 'srcset="' . $mobile_srcset[0] . ' 500w, ', $srcset);
}
}
return $srcset;
}
add_theme_support('post-thumbnails');
$thumbnails = array(
array(
'name' => 'pixel',
'width' => 12,
'height' => 12,
'crop' => false
),
array(
'name' => 'mobile',
'width' => 500,
'height' => 500,
'crop' => false
),
);
foreach ($thumbnails as $thumbnail) {
add_image_size($thumbnail['name'], $thumbnail['width'], $thumbnail['height'], $thumbnail['crop']);
}
<script type="text/javascript">
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
var active = false;
var offset = 300;
function lazyLoad() {
if (active === false) {
active = true;
setTimeout(function () {
lazyImages.forEach(function (lazyImage) {
if (((lazyImage.getBoundingClientRect().top - offset) <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= -offset) && $(lazyImage).is(':visible')) {
lazyImage.src = lazyImage.getAttribute('data-src');
lazyImage.srcset = lazyImage.getAttribute('data-srcset');
lazyImage.classList.remove("lazy");
lazyImage.classList.add("lazy-loaded");
lazyImages = lazyImages.filter(function (image) {
return image !== lazyImage;
});
}
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
active = false;
}, 200);
}
};
document.addEventListener("DOMContentLoaded", function () {
lazyLoad();
document.addEventListener("scroll", lazyLoad, {passive: true});
window.addEventListener("resize", lazyLoad, {passive: true});
window.addEventListener("orientationchange", lazyLoad, {passive: true});
setTimeout(function () {
lazyLoad();
}, 1000);
});
</script>