{"id":19,"date":"2024-02-10T03:30:00","date_gmt":"2024-02-10T00:00:00","guid":{"rendered":"https:\/\/shahroodi.com\/?code_tutorial=js-lazy-loading-images"},"modified":"2024-02-10T03:30:00","modified_gmt":"2024-02-10T00:00:00","slug":"js-lazy-loading-images","status":"publish","type":"code_tutorial","link":"https:\/\/shahroodi.com\/?code_tutorial=js-lazy-loading-images","title":{"rendered":"JS: Lazy Loading Images"},"content":{"rendered":"<p>Lazy loading identifies resources as non-blocking and loads them only when needed. For images, this means loading them only when they are about to enter the viewport. Modern browsers support the loading=&#8221;lazy&#8221; attribute; Intersection Observer can provide a flexible fallback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Improve page load times by implementing native lazy loading for images and using Intersection Observer as a fallback for older browsers. A simple trick for a big performance win.<\/p>\n","protected":false},"menu_order":4,"comment_status":"open","ping_status":"closed","template":"","class_list":["post-19","code_tutorial","type-code_tutorial","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shahroodi.com\/index.php?rest_route=\/wp\/v2\/code_tutorial\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shahroodi.com\/index.php?rest_route=\/wp\/v2\/code_tutorial"}],"about":[{"href":"https:\/\/shahroodi.com\/index.php?rest_route=\/wp\/v2\/types\/code_tutorial"}],"replies":[{"embeddable":true,"href":"https:\/\/shahroodi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"wp:attachment":[{"href":"https:\/\/shahroodi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}