{"id":8756,"date":"2024-01-20T17:55:00","date_gmt":"2024-01-20T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8756"},"modified":"2024-01-22T15:55:50","modified_gmt":"2024-01-22T10:55:50","slug":"progressive-image-loading-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/","title":{"rendered":"Progressive Image Loading in JavaScript"},"content":{"rendered":"<p>This JavaScript code implements progressive image loading with a blur effect to enhance page load times. It calculates aspect ratios, sets max dimensions, and loads images progressively. It&#8217;s helpful for optimizing image-heavy websites.<\/p>\n<p>You can use this code on image-rich websites to improve loading times. It reduces initial page load delay by loading low-quality images first and then replacing them with high-quality ones, enhancing user experience. This helps retain visitor engagement and improves overall site performance.<\/p>\n<h2>How to Use Progressive Image Loading JavaScript Code<\/h2>\n<p>1. Inside your HTML container (<code>&lt;div class=\"container\"&gt;<\/code> in the example), insert the images you want to load progressively using the following structure:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"container\"&gt;\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"graf-figure\"<\/span>&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"aspectRatioPlaceholder\"<\/span>&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"aspectRatioPlaceholder-fill\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"progressiveMedia\"<\/span> <span class=\"hljs-attr\">data-width<\/span>=<span class=\"hljs-string\">\"YOUR_IMAGE_WIDTH\"<\/span> <span class=\"hljs-attr\">data-height<\/span>=<span class=\"hljs-string\">\"YOUR_IMAGE_HEIGHT\"<\/span>&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"progressiveMedia-thumbnail\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"LOW_QUALITY_IMAGE_URL\"<\/span> \/&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">canvas<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"progressiveMedia-canvas\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">canvas<\/span>&gt;<\/span> \r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"progressiveMedia-image\"<\/span> <span class=\"hljs-attr\">data-src<\/span>=<span class=\"hljs-string\">\"HIGH_QUALITY_IMAGE_URL\"<\/span> \/&gt;<\/span> <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;\r\n<\/span> <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span> \r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Replace <code>YOUR_IMAGE_WIDTH<\/code>, <code>YOUR_IMAGE_HEIGHT<\/code>, <code>LOW_QUALITY_IMAGE_URL<\/code>, and <code>HIGH_QUALITY_IMAGE_URL<\/code> with the appropriate values and image URLs.<\/p>\n<p>2. Similarly, add the following CSS code to your project to add a blur effect while loading images progressively. You can modify the CSS code (in <code>styles.css<\/code>) to match your website&#8217;s design and layout preferences.<\/p>\n<pre class=\"prettyprint linenums lang-css\">\/**\r\n * Pilpil v1.0.0 - Progressive Image Loading\r\n * @link https:\/\/zafree.github.io\/pilpil\r\n * @copyright 2015-2023 Zafree\r\n * @license MIT\r\n *\/\r\nfigure {\r\n  display: block;\r\n  margin: 0; }\r\n\r\n.graf-figure {\r\n  position: relative;\r\n  clear: both;\r\n  outline: 0;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box; }\r\n\r\n.aspectRatioPlaceholder {\r\n  position: relative;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  display: block; }\r\n\r\n.aspectRatioPlaceholder-fill {\r\n  display: block; }\r\n\r\n.progressiveMedia {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0, 0, 0, 0.05); }\r\n\r\n.progressiveMedia-thumbnail {\r\n  display: none; }\r\n\r\n.progressiveMedia-canvas {\r\n  display: block;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: auto;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  vertical-align: baseline; }\r\n\r\n.progressiveMedia-image {\r\n  display: block;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: auto;\r\n  z-index: 100;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box; }\r\n\r\n.progressiveMedia .progressiveMedia-canvas {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden; }\r\n.progressiveMedia.is-canvasLoaded .progressiveMedia-canvas {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  -webkit-transition: visibility 0s linear 0s,opacity .4s 0s;\r\n  transition: visibility 0s linear 0s,opacity .4s 0s; }\r\n.progressiveMedia .progressiveMedia-image {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden; }\r\n.progressiveMedia.is-imageLoaded .progressiveMedia-image {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  -webkit-transition: visibility 0s linear 0s, opacity 1s 0s;\r\n  transition: visibility 0s linear 0s, opacity 1s 0s; }\r\n\r\n.github-star,\r\n.graf-figure {\r\n  margin-top: 20px;\r\n  margin-bottom: 20px;\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript code to\u00a0your project, create a JavaScript file (e.g., <code>script.js<\/code>), and paste the code into it. This code will handle the progressive loading of images. It calculates aspect ratios, sets maximum dimensions, and loads images progressively. No further configuration is needed.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/**\r\n * Pilpil v1.0.0 - Progressive Image Loading\r\n * @link https:\/\/zafree.github.io\/pilpil\r\n * @copyright 2015-2023 Zafree\r\n * @license MIT\r\n *\/\r\n;(function() {\r\n    'use strict';\r\n\r\n    \/\/ set progressive image loading\r\n    var progressiveMedias = document.querySelectorAll('.progressiveMedia');\r\n    for (var i = 0; i &lt; progressiveMedias.length; i++) {\r\n        loadImage(progressiveMedias[i]);\r\n    }\r\n\r\n    \/\/ global function\r\n    function loadImage(progressiveMedia) {\r\n\r\n        \/\/ calculate aspect ratio\r\n        \/\/ for the aspectRatioPlaceholder-fill\r\n        \/\/ that helps to set a fixed fill for loading images\r\n        var width = progressiveMedia.dataset.width,\r\n        height = progressiveMedia.dataset.height,\r\n        fill = height \/ width * 100,\r\n        placeholderFill = progressiveMedia.previousElementSibling;\r\n\r\n        placeholderFill.setAttribute('style', 'padding-bottom:'+fill+'%;');\r\n\r\n\r\n        \/\/ set max-height and max-width to aspectRatioPlaceholder\r\n        \/\/ that is fun\r\n        var aspectRatioPlaceholder = progressiveMedia.parentElement,\r\n        maxWidth = aspectRatioPlaceholder.offsetWidth,\r\n        maxHeight = aspectRatioPlaceholder.offsetHeight;\r\n\r\n        aspectRatioPlaceholder.setAttribute('style', 'max-width:'+maxWidth+'px; max-height:'+maxHeight+'px;');\r\n\r\n\r\n        \/\/ get thumbnail height wight\r\n        \/\/ make canvas fun part\r\n        var thumbnail = progressiveMedia.querySelector('.progressiveMedia-thumbnail'),\r\n        smImageWidth = thumbnail.width,\r\n        smImageheight = thumbnail.height,\r\n\r\n        canvas = progressiveMedia.querySelector('.progressiveMedia-canvas'),\r\n        context = canvas.getContext('2d');\r\n\r\n        canvas.height = smImageheight;\r\n        canvas.width = smImageWidth;\r\n\r\n        var img = new Image();\r\n        img.src = thumbnail.src;\r\n\r\n        img.onload = function () {\r\n            \/\/ context.drawImage(img, 0, 0);\r\n            \/\/ draw canvas\r\n            var canvasImage = new CanvasImage(canvas, img);\r\n            canvasImage.blur(2);\r\n\r\n            \/\/ load canvas visible\r\n            progressiveMedia.classList.add('is-canvasLoaded');\r\n        };\r\n\r\n\r\n        \/\/ grab data-src from original image\r\n        \/\/ from progressiveMedia-image\r\n        var lgImage = progressiveMedia.querySelector('.progressiveMedia-image');\r\n        lgImage.src = lgImage.dataset.src;\r\n\r\n        \/\/ onload image visible\r\n        lgImage.onload = function() {\r\n            progressiveMedia.classList.add('is-imageLoaded');\r\n        }\r\n    }\r\n\r\n})();\r\n\r\n\/\/ canvas blur function\r\nCanvasImage = function (e, t) {\r\n    this.image = t;\r\n    this.element = e;\r\n    e.width = t.width;\r\n    e.height = t.height;\r\n    this.context = e.getContext('2d');\r\n    this.context.drawImage(t, 0, 0);\r\n};\r\n\r\nCanvasImage.prototype = {\r\n    blur:function(e) {\r\n        this.context.globalAlpha = 0.5;\r\n        for(var t = -e; t &lt;= e; t += 2) {\r\n            for(var n = -e; n &lt;= e; n += 2) {\r\n                this.context.drawImage(this.element, n, t);\r\n                var blob = n &gt;= 0 &amp;&amp; t &gt;= 0 &amp;&amp; this.context.drawImage(this.element, -(n -1), -(t-1));\r\n            }\r\n        }\r\n    }\r\n};<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully integrated this JavaScript code for progressive image loading. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code implements progressive image loading with a blur effect to enhance page load times. It calculates aspect ratios,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":8781,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-8756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Progressive Image Loading in JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progressive Image Loading in JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:55:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Progressive Image Loading in JavaScript\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\"},\"wordCount\":225,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\",\"name\":\"Progressive Image Loading in JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:50+00:00\",\"description\":\"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Progressive Image Loading in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Progressive Image Loading in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progressive Image Loading in JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Progressive Image Loading in JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T17:55:00+00:00","article_modified_time":"2024-01-22T10:55:50+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Progressive Image Loading in JavaScript","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:50+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/"},"wordCount":225,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/","name":"Progressive Image Loading in JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:50+00:00","description":"Here is a free code snippet to create a Progressive Image Loading in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Progressive-Image-Loading-in-JavaScript.png","width":1280,"height":960,"caption":"Progressive Image Loading in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/progressive-image-loading-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Progressive Image Loading in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":912,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8756"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8756\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8781"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}