{"id":16614,"date":"2012-03-27T15:25:06","date_gmt":"2012-03-27T22:25:06","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16614"},"modified":"2020-01-26T13:19:54","modified_gmt":"2020-01-26T20:19:54","slug":"lazy-loading-images","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/lazy-loading-images\/","title":{"rendered":"Lazy Loading Images"},"content":{"rendered":"<p><strong>UPDATE:<\/strong> This is pretty old. If you&#8217;re looking to lazy load images these days, I&#8217;d recommend looking at:<\/p>\n<ul>\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\/a-native-lazy-load-for-the-web-platform\/\">A Native Lazy Load for the Web Platform<\/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<hr>\n<p>Use a <code>blank.gif<\/code> as the <code>src<\/code> of images, and include the <code>width<\/code> and <code>height<\/code> of the final image. <\/p>\n<pre rel=\"HTML\"><code>&lt;img src=\"blank.gif\" class=\"lazy\" data-src=\"\/images\/full-size.jpg\" width=\"240\" height=\"152\"&gt;<\/code><\/pre>\n<pre rel=\"JavaScript\"><code>\/* lazyload.js (c) Lorenzo Giuliani\r\n * MIT License (http:\/\/www.opensource.org\/licenses\/mit-license.html)\r\n *\r\n * expects a list of:  \r\n * `&lt;img src=\"blank.gif\" data-src=\"my_image.png\" width=\"600\" height=\"400\" class=\"lazy\"&gt;`\r\n *\/\r\n\r\n!function(window){\r\n  var $q = function(q, res){\r\n        if (document.querySelectorAll) {\r\n          res = document.querySelectorAll(q);\r\n        } else {\r\n          var d=document\r\n            , a=d.styleSheets[0] || d.createStyleSheet();\r\n          a.addRule(q,'f:b');\r\n          for(var l=d.all,b=0,c=[],f=l.length;b&lt;f;b++)\r\n            l[b].currentStyle.f &amp;&amp; c.push(l[b]);\r\n\r\n          a.removeRule(0);\r\n          res = c;\r\n        }\r\n        return res;\r\n      }\r\n    , addEventListener = function(evt, fn){\r\n        window.addEventListener\r\n          ? this.addEventListener(evt, fn, false)\r\n          : (window.attachEvent)\r\n            ? this.attachEvent('on' + evt, fn)\r\n            : this['on' + evt] = fn;\r\n      }\r\n    , _has = function(obj, key) {\r\n        return Object.prototype.hasOwnProperty.call(obj, key);\r\n      }\r\n    ;\r\n\r\n  function loadImage (el, fn) {\r\n    var img = new Image()\r\n      , src = el.getAttribute('data-src');\r\n    img.onload = function() {\r\n      if (!! el.parent)\r\n        el.parent.replaceChild(img, el)\r\n      else\r\n        el.src = src;\r\n\r\n      fn? fn() : null;\r\n    }\r\n    img.src = src;\r\n  }\r\n\r\n  function elementInViewport(el) {\r\n    var rect = el.getBoundingClientRect()\r\n\r\n    return (\r\n       rect.top    &gt;= 0\r\n    &amp;&amp; rect.left   &gt;= 0\r\n    &amp;&amp; rect.top &lt;= (window.innerHeight || document.documentElement.clientHeight)\r\n    )\r\n  }\r\n\r\n    var images = new Array()\r\n      , query = $q('img.lazy')\r\n      , processScroll = function(){\r\n          for (var i = 0; i &lt; images.length; i++) {\r\n            if (elementInViewport(images[i])) {\r\n              loadImage(images[i], function () {\r\n                images.splice(i, i);\r\n              });\r\n            }\r\n          };\r\n        }\r\n      ;\r\n    \/\/ Array.prototype.slice.call is not callable under our lovely IE8 \r\n    for (var i = 0; i &lt; query.length; i++) {\r\n      images.push(query[i]);\r\n    };\r\n\r\n    processScroll();\r\n    addEventListener('scroll',processScroll);\r\n\r\n}(this);\u200b<\/code><\/pre>\n<p class=\"codepen\" data-height=\"361\" style=\"height: 361px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"chriscoyier\" data-slug-hash=\"MMXXjK\" style=\"height: 361px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Lazy Loading Images\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/MMXXjK\/\" rel=\"noopener\"><br \/>\n  Lazy Loading Images<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE: This is pretty old. If you&#8217;re looking to lazy load images these days, I&#8217;d recommend looking at: The Complete Guide to Lazy Loading Images A Native Lazy Load for the Web Platform Tips for rolling your own lazy loading Use a blank.gif as the src of images, and include the width and height of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","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":""},"tags":[908],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16614"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16614"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16614\/revisions"}],"predecessor-version":[{"id":302724,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16614\/revisions\/302724"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16614"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}