Lazy Loading
Defer loading off-screen images to speed up mobile page load. Use native lazy loading or IntersectionObserver with jQuery for older browser support.
jQuery
Intermediate
4 min read
Lazy Loading Images on Mobile
Example
<!-- Native lazy loading (preferred) -->
<img src="photo.jpg" loading="lazy" alt="...">
<!-- jQuery + IntersectionObserver fallback -->
<img class="lazy" data-src="photo.jpg" src="placeholder.jpg" alt="...">
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
$(img).attr("src", $(img).data("src")).removeClass("lazy");
observer.unobserve(img);
}
});
});
$("img.lazy").each((i, el) => observer.observe(el));
</script> Pro Tip
loading="lazy" is supported in all modern browsers — use it on all below-the-fold images.