{"id":8811,"date":"2025-04-22T18:47:42","date_gmt":"2025-04-22T13:17:42","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8811"},"modified":"2025-04-22T18:47:46","modified_gmt":"2025-04-22T13:17:46","slug":"lazyloading-in-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/lazyloading-in-javascript\/","title":{"rendered":"LAZYLOADING IN JAVASCRIPT"},"content":{"rendered":"\n

Lazyloading :<\/strong><\/p>\n\n\n\n

Lazyloading is a technique used in web development to delay the loading of non essential resources such as images and videos or script until they are needed.
Lazy loading helps faster Initial Load time ,Improves Performance,Enhances user Experience.<\/p>\n\n\n\n

Loading Attribute :<\/strong><\/p>\n\n\n\n

Here is an example demonstrating lazyloading of images using the loading attribute<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

loading attribute allows a browser to defer loading offscreen image and i frames
Delays loading the resources images or iframe until about to enter the viewport. Ideal for below the fold content like galleries , embedded videos or scroll pages.<\/p>\n\n\n\n

Intersection Observer API :<\/strong>
Here is an example demonstrating lazyloading of images using the Intersection Observer API<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

data-src is a custom attribute ,it’s stores the actual image URL temporarily without loading it right away .<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Code Explanation :<\/strong><\/p>\n\n\n\n