{"id":260267,"date":"2017-09-26T07:00:22","date_gmt":"2017-09-26T14:00:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=260267"},"modified":"2019-07-10T16:04:55","modified_gmt":"2019-07-10T23:04:55","slug":"lozad-js-performant-lazy-loading-images","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/lozad-js-performant-lazy-loading-images\/","title":{"rendered":"Lozad.js: Performant Lazy Loading of Images"},"content":{"rendered":"<p>There are a few different &#8220;traditional&#8221; ways of lazy loading of images. They all require JavaScript needing to figure out if an image is currently visible within the browser&#8217;s viewport or not. Traditional approaches might be:<\/p>\n<ul>\n<li>Listening to <code>scroll<\/code> and <code>resize<\/code> events on the <code>window<\/code><\/li>\n<li>Using a timer like <code>setInterval<\/code><\/li>\n<\/ul>\n<p>Both of these have performance problems.<\/p>\n<p><!--more--><\/p>\n<div class=\"explanation\">\n<p>If you&#8217;re looking to add lazy loading to your site&#8217;s media right now, Lozad.js isn&#8217;t a bad choice, but native support is going to start happening soon so that should be considered in your markup plans.<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/a-native-lazy-load-for-the-web-platform\/\">A Native Lazy Load for the Web<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/the-complete-guide-to-lazy-loading-images\/\">The Complete Guide to Lazy Loading Images<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/tips-for-rolling-your-own-lazy-loading\/\">Tips for rolling your own lazy loading<\/a><\/li>\n<\/ul>\n<\/div>\n<h3>Why traditional approaches are not performant?<\/h3>\n<p>Both of those approaches listed above are problematic because they <em>work<\/em> <em>repeatedly<\/em> and their function <em>triggers<\/em> **<em>forced layout<\/em> while calculating the position of the element with respect to the viewport, to check if the element is inside the viewport or not.<\/p>\n<p>To combat these performance problems, some libraries <em>throttle<\/em> the function calls that do these things, limiting the number of times they are done.<\/p>\n<p>Even then, repeated layout\/reflow triggering <a href=\"https:\/\/gist.github.com\/paulirish\/5d52fb081b3570c81e3a\" rel=\"noopener\">operations<\/a> consume precious time while a user interacts with the site and induces &#8220;junk&#8221; (that sluggish feeling when interacting with a site that nobody likes).<\/p>\n<p>There is another approach we could use, that makes use of a new browser API designed specifically to help us with things like lazy loading: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" rel=\"noopener\">the Intersection Observer API<\/a>.<\/p>\n<p>That&#8217;s exactly what my own library, <a href=\"https:\/\/github.com\/ApoorvSaxena\/lozad.js\" rel=\"noopener\">Lozad.js<\/a>, uses.<\/p>\n<figure id=\"post-260268\" class=\"align-none media-260268\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/s_29E8C45E02B8336138FF9D42F6FED1CE28964941DD8BFD3FD5E751E96FE0C633_1504810907674_lozad-banner.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<h3>What makes Lozad.js performant?<\/h3>\n<p>Intersection Observers are the main ingredient. They allow registration of callback functions which get called when a monitored element enters or exits another element (or the viewport itself). <\/p>\n<p>While Intersection Observers don&#8217;t provide the exact pixels which overlap, they allow listening to events that allow us to watch if elements enter other elements by X% (configurable), <em>then<\/em> the callback gets fired. That is exactly our use case when using Intersection Observers for lazy loading.<\/p>\n<h3>Quick facts about Lozad.js<\/h3>\n<ul>\n<li>Light-weight: just <strong>535 bytes<\/strong> minified &#038; gzipped<\/li>\n<li>No dependencies<\/li>\n<li>Uses the IntersectionObserver API<\/li>\n<li>Allows lazy loading of dynamically added elements as well (not just images), though a custom load function<\/li>\n<\/ul>\n<h3>Usage<\/h3>\n<p>Install from <code>npm<\/code>:<\/p>\n<pre rel=\"Command Line\"><code>yarn add lozad<\/code><\/pre>\n<p>or via CDN:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lozad\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>In your HTML, add a class to any image you wish to lazy load. The class can be changed via configuration, but &#8220;lozad&#8221; is the default.  <\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;img class=\"lozad\" data-src=\"image.png\"&gt;<\/code><\/pre>\n<p>Also note we&#8217;ve removed the <code>src<\/code> attribute of the image and replaced it with <code>data-src<\/code>. This prevents the image from being loaded before the JavaScript executes and determines it should be. It&#8217;s up to you to consider the implications there. With this HTML, images won&#8217;t be shown at all until JavaScript executes. Nor will they be shown in contexts like RSS or other syndication. You may want to filter your HTML to only use this markup pattern when shown on your own website, and not elsewhere.<\/p>\n<p>In JavaScript, initialize Lozad library with the options:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const observer = lozad(); \/\/ lazy loads elements with default selector as \".lozad\"\r\nobserver.observe();<\/code><\/pre>\n<p>Read <a href=\"https:\/\/github.com\/ApoorvSaxena\/lozad.js#usage\" rel=\"noopener\">here<\/a> about the complete list of options available in Lozad.js API.<\/p>\n<h3>Demo<\/h3>\n<p data-height=\"535\" style=\"height: 535px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"oGgxJr\" data-default-tab=\"result\" data-user=\"ApoorvSaxena\" data-embed-version=\"2\" data-pen-title=\"oGgxJr\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/ApoorvSaxena\/pen\/oGgxJr\/\" rel=\"noopener\">oGgxJr<\/a> by Apoorv Saxena (<a href=\"https:\/\/codepen.io\/ApoorvSaxena\" rel=\"noopener\">@ApoorvSaxena<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Browser support<\/h3>\n<p>Browser support is limited, as the feature is relatively new. Use <a href=\"https:\/\/github.com\/w3c\/IntersectionObserver\/tree\/master\/polyfill\" rel=\"noopener\">the official IntersectionObserver polyfill<\/a> to overcome the limited support of this API.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a few different &#8220;traditional&#8221; ways of lazy loading of images. They all require JavaScript needing to figure out if an image is currently visible within the browser&#8217;s viewport or not. Traditional approaches might be: Listening to scroll and resize events on the window Using a timer like setInterval Both of these have performance [&hellip;]<\/p>\n","protected":false},"author":249955,"featured_media":260268,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/s_29E8C45E02B8336138FF9D42F6FED1CE28964941DD8BFD3FD5E751E96FE0C633_1504810907674_lozad-banner.png?fit=1548%2C590&ssl=1","jetpack-related-posts":[{"id":286080,"url":"https:\/\/css-tricks.com\/native-lazy-loading\/","url_meta":{"origin":260267,"position":0},"title":"Native Lazy Loading","date":"April 8, 2019","format":false,"excerpt":"IntersectionObserver has made lazy loading a lot easier and more efficient than it used to be, but to do it really right you still gotta remove the src and such, which is cumbersome. It's definitely not as easy as: Addy Osmani says it's coming in Chrome 75: The loading attribute\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/lazy-load-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275613,"url":"https:\/\/css-tricks.com\/a-native-lazy-load-for-the-web-platform\/","url_meta":{"origin":260267,"position":1},"title":"A Native Lazy Load for the Web","date":"August 27, 2018","format":false,"excerpt":"A new Chrome feature dubbed \"Blink LazyLoad\" is designed to dramatically improve performance by deferring the load of below-the-fold images and third-party s. The goals of this bold experiment are to improve the overall render speed of content that appears within a user\u2019s viewport (also known as above-the-fold), as well\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/lazyload.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303044,"url":"https:\/\/css-tricks.com\/native-image-lazy-loading-in-chrome-is-way-too-eager\/","url_meta":{"origin":260267,"position":2},"title":"Native Image Lazy Loading in Chrome Is Way Too Eager","date":"February 5, 2020","format":false,"excerpt":"Interesting research from Aaron Peters on <img loading=\"lazy\" ... >: On my 13 inch macbook, with Dock positioned on the left, the viewport height in Chrome is 786 pixels so images with\u00a0loading=\"lazy\"\u00a0that are more than 4x the viewport down the page are eagerly fetched by Chrome on page load.In my\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/chrome.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287494,"url":"https:\/\/css-tricks.com\/a-deep-dive-into-native-lazy-loading-for-images-and-frames\/","url_meta":{"origin":260267,"position":3},"title":"A Deep Dive into Native Lazy-Loading for Images and Frames","date":"May 15, 2019","format":false,"excerpt":"Today's websites are packed with heavy media assets like images and videos. Images make up around 50% of an average website's traffic. Many of them, however, are never shown to a user because they're placed way below the fold. What\u2019s this thing about images being lazy, you ask? Lazy-loading is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/diving-board-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276700,"url":"https:\/\/css-tricks.com\/the-complete-guide-to-lazy-loading-images\/","url_meta":{"origin":260267,"position":4},"title":"The Complete Guide to Lazy Loading Images","date":"September 25, 2018","format":false,"excerpt":"Wondering how lazy loading images works? It's an important thing to understand as it can really speed up the loading of your page and reduce bandwidth usage both for your site and the user.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/lazy-featured-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":294443,"url":"https:\/\/css-tricks.com\/lazy-load-embedded-youtube-videos\/","url_meta":{"origin":260267,"position":5},"title":"Lazy load embedded YouTube videos","date":"August 20, 2019","format":false,"excerpt":"This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/lazy-load-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/s_29E8C45E02B8336138FF9D42F6FED1CE28964941DD8BFD3FD5E751E96FE0C633_1504810907674_lozad-banner.png?fit=1024%2C390&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260267"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/249955"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=260267"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260267\/revisions"}],"predecessor-version":[{"id":292734,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/260267\/revisions\/292734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/260268"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=260267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=260267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=260267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}