{"id":28737,"date":"2023-05-04T06:00:00","date_gmt":"2023-05-04T13:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=28737"},"modified":"2024-04-10T07:33:35","modified_gmt":"2024-04-10T14:33:35","slug":"automatically-loading-high-quality-images-cloudinary-intersectionobserver","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/automatically-loading-high-quality-images-cloudinary-intersectionobserver","title":{"rendered":"Automatically Loading High-Quality Images with Cloudinary and IntersectionObserver"},"content":{"rendered":"

Web performance is, or should be, one of the top concerns for any developer. This is certainly not a new issue, but it is refreshing to see our community put more and more emphasis on this topic over the past few years. Even better, it\u2019s great to see browsers add additional support to help us in this endeavor \u2014 from devtools to performance tests and even to new APIs that make developers\u2019 jobs easier. One of these APIs is the IntersectionObserver<\/a>. This gives developers a way to determine when a particular DOM element has become visible in the browser\u2019s viewport. In this article, I\u2019ll give an introduction to the API and then demonstrate a way to use it with Cloudinary\u2019s imaging APIs<\/a>.\n\u200b<\/p>\n

The IntersectionObserver API<\/h2>\n

\u200b\nMDN defines the IntersectionObserver feature as such:\n\u200b<\/p>\n

\nThe Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.\n<\/blockquote>\n\u200b\n

At a high level, what this means is that we can determine when an item, like an image, becomes visible based on either the viewport of the browser (the entire visible page) or within some other element (imagine a container div<\/code> for example). The API can be fine-tuned to only inform you when an element is 100% visible, or some other percent. You can also add a margin around the root element being observed.\n\u200b\nYou begin by creating an instance of an IntersectionObserver object. This is done by passing in your options as well as a function to be called when an intersection happens.\n\u200b<\/p>\n

const<\/span> noticeImage = (entries,observer<\/span>) =><\/span> {\n\u200b\n}\n\u200b\nlet<\/span> options = {\n  rootMargin<\/span>: '0px'<\/span>,\n  threshold<\/span>: 0.3<\/span>\n}\n\u200b\nlet<\/span> observer = new<\/span> IntersectionObserver(noticeImage, options);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\u200b\nIn the above example, I did not specify a root option. This will then default to the browser\u2019s viewport. I don\u2019t want a margin so I\u2019ve set it to 0. And I\u2019ve specified a threshold of 30% for items. In other words, when 30% or more of the item is found, consider it intersected.\n\u200b\nI\u2019ve also specified an empty handler, noticeImage<\/code>, that I\u2019ll fill out in a moment.<\/p>\n
Alright, at this point, I\u2019ve defined an intersection and specified how to watch things within, but I\u2019ve not actually told it what I want to observe. This is done by using the observe<\/code> method on the IntersectionObserver object.<\/p>\n
Let\u2019s first add some HTML:\n\u200b<\/p>\n
<div<\/span> id<\/span>=\"images\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/300_1.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/300_2.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/400_1.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/400_2.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/450.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/666.jpg\"<\/span>><\/span>\n\t<img<\/span> src<\/span>=\"https:\/\/static.raymondcamden.com\/images\/2023\/04\/700.jpg\"<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
\u200b\nI\u2019ve also got a bit of CSS to help space them out a bit:\n\u200b<\/p>\n
#images<\/span> img<\/span> {\n\tdisplay<\/span>:block;\n\tmargin<\/span>: auto;\n\tpadding-top<\/span>: 75px<\/span>;\n\tpadding-bottom<\/span>: 75px<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
\u200b\nGiven that we\u2019ve got images on our page, let\u2019s grab all of them within that div element:\n\u200b<\/p>\n
document<\/span>.querySelectorAll('#images img'<\/span>).forEach(i<\/span> =><\/span> observer.observe(i));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\u200b\nNow we\u2019ve got our IntersectionObserver created and a set of elements it should be looking out for, let\u2019s then flesh out our handler:\n\u200b<\/p>\n
const<\/span> noticeImage = (entries, observer<\/span>) =><\/span> {\n\tconsole<\/span>.log('noticeImage'<\/span>);\n\tentries.forEach(e<\/span> =><\/span> {\n\t\tif<\/span>(e.isIntersecting) {\n\t\t\tconsole<\/span>.log('i noticed '<\/span>, e.target.src);\n\t\t\tobserver.unobserve(e.target);\n\t\t}\n\t});\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\u200b\nIntersectionObserver handlers are passed an array of items that have become visible (it\u2019s an array since a user could scroll quickly enough for multiple items to become visible) as well as the original IntersectionObserver object. Each entry contains a number of properties you could use if desired. For now, I only check isIntersecting<\/code>, and if true, I log a message out and then stop observing it. The value would be false if the item left<\/em> the IntersectionObserver root area but since I know our demo is going to be doing one operation per item intersected, I only care when the value is true.<\/p>\n
To test this, check out the CodePen below:\n\u200b<\/p>\n
\n  See the Pen \n  Intersection<\/a> by Raymond Camden (@cfjedimaster<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n