{"id":8603,"date":"2020-02-03T11:15:10","date_gmt":"2020-02-03T11:15:10","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=8603"},"modified":"2022-12-13T16:06:36","modified_gmt":"2022-12-13T10:36:36","slug":"lazy-load-images-in-rails-application","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/","title":{"rendered":"How to Implement Lazy Loading in JQuery with Ruby on Rails"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"193\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/loading-of-image.png\" alt=\"loading of images\" class=\"wp-image-13313\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/loading-of-image.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/loading-of-image-300x75.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div>\n\n\n<p><em><strong>Have you ever found a very simple approach to do lazy loading in your application? Not yet? Let\u2019s start.<\/strong><\/em><\/p>\n\n\n\n<p>I wanted to add lazy loading of images on my website to improve the page load time because it contains too many images when the application is loading for the first time. Here, I have tried some simple logic which helps you to understand how to lazy load image in rails application.<\/p>\n\n\n\n<p>It will quickly load images after page load in the app. It makes page loading simple during Ruby on Rails rapid application development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is lazy loading?<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/lazy-loading-guidance\/images-and-video\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy loading<\/a> is an optimization mechanism for the online content of the website.<\/li><li>Lazy loading is a term frequently used to refer to the concept of loading parts only when it&#8217;s needed.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why do we Require Lazy Loading?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Loading the entire page of the website and delivering it to the user might take more time to load and can\u2019t satisfy the user for faster content rendering.<\/li><li>Instead of that, we can do lazy loading which helps to improve rendering required content first and the other after some time using lazy loading. We can use jQuery &#8211; lazy load images work best with that.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">How does <strong>Lazy Loading<\/strong> work?<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"220\" height=\"124\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/let-it-begin.png\" alt=\"let it begin\" class=\"wp-image-13314\"\/><\/figure>\n<\/div>\n\n\n<p>Let\u2019s start from the very beginning and implement the whole flow to have a brief introduction to lazy load <a href=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-emoji-in-rails-application\/\" target=\"_blank\" rel=\"noreferrer noopener\">images in rails application<\/a>. We will use the following Lazy load images in Javascript example &#8211;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Further Reading: <a href=\"https:\/\/dev.to\/botreetech\/improve-react-app-performance-by-lazy-loading-reactjs-components-1imd\" target=\"_blank\" rel=\"noopener noreferrer\">Improve React App Performance by Lazy Loading ReactJS Components!<\/a><\/strong><\/p><\/blockquote>\n\n\n\n<p><strong>Technology stack:<\/strong><\/p>\n\n\n\n<p>Ruby 2.5.1p57, Rails 5.2.4, <a href=\"https:\/\/github.com\/tuupola\/lazyload\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery Lazy Load Plugin<\/a><\/p>\n\n\n\n<p><strong>Here are the steps to implement lazy loading in jQuery<\/strong><\/p>\n\n\n\n<p>Step 1: <a href=\"https:\/\/dev.to\/botreetech\/adding-page-specific-js-to-rails-application-112i\" target=\"_blank\" rel=\"noopener noreferrer\">Create a new rails application<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"410\" height=\"50\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-1.png\" alt=\"code 1\" class=\"wp-image-13315\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-1.png 410w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-1-300x37.png 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/figure>\n<\/div>\n\n\n<p>Step 2: add in your <a href=\"https:\/\/www.botreetechnologies.com\/blog\/pagy-a-new-pagination-gem-in-the-realm-of-rails-world\" target=\"_blank\" rel=\"noopener noreferrer\">gem file<\/a>: <a href=\"https:\/\/github.com\/jassa\/lazyload-rails\" target=\"_blank\" rel=\"noopener noreferrer\">gem &#8220;lazyload-rails&#8221;<\/a><\/p>\n\n\n\n<p>Step 3: $ bundle install<\/p>\n\n\n\n<p>Step 4: create a new file in app\/assets\/javascripts\/jquery.lazyload.js and grab the <a href=\"https:\/\/github.com\/tuupola\/lazyload\" target=\"_blank\" rel=\"noopener noreferrer\">lazyload.js<\/a> plugin.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"264\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-2.png\" alt=\"code 2\" class=\"wp-image-13316\"\/><\/figure>\n<\/div>\n\n\n<p>Step 5: require this plugin in your application.js<\/p>\n\n\n\n<p>\/\/= require jquery.lazyload<\/p>\n\n\n\n<p><em><strong>Important: Remember that the Lazy Load Plugin depends on jQuery.<\/strong><\/em><\/p>\n\n\n\n<p>Step 6: Create a new file in your config\/initializers\/lazyload.rb and add the following code snippet:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"91\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-3.png\" alt=\"Code 3\" class=\"wp-image-13317\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-3.png 747w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-3-300x37.png 300w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/figure>\n<\/div>\n\n\n<p>Step 7: create a post controller and in routes.rb file and add the following.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"96\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-4.png\" alt=\"code 4\" class=\"wp-image-13318\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-4.png 882w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-4-300x33.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-4-768x84.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/figure>\n<\/div>\n\n\n<p>Step 8: In your Post controller add images link :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-5.png\" alt=\"Code 5\" class=\"wp-image-13319\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-5.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-5-300x90.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-5-768x230.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Step 9: In your view file index.html.erb do:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"611\" height=\"219\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-6.png\" alt=\"Code 6\" class=\"wp-image-13320\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-6.png 611w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/code-6-300x108.png 300w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/figure>\n<\/div>\n\n\n<p>Great !! you are all done. You can test it in your application on how lazy loading works.<\/p>\n\n\n\n<p>You can find the <a href=\"https:\/\/github.com\/BoTreeConsultingTeam\" target=\"_blank\" rel=\"noopener noreferrer\">complete code on Github<\/a> <a href=\"https:\/\/github.com\/HarmishaPrajapati\/lazy_loading\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n\n\n\n<p>You can test this sample App on Heroku :<\/p>\n\n\n\n<p>Note: Press ctrl + shift + r for viewing the better lazy loading of images<\/p>\n\n\n\n<p>https:\/\/lazy-loading.herokuapp.com\/<\/p>\n\n\n\n<p>That\u2019s it!<\/p>\n\n\n\n<p>BoTree Technologies is a leading <a href=\"https:\/\/www.botreetechnologies.com\" target=\"_blank\" rel=\"noopener noreferrer\">software development company in Ahmedabad<\/a> that builds top-notch software and solutions to increase business revenue and maximize productivity.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Consulting is free<\/a> &#8211; let us help you grow!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever found a very simple approach to do&#8230;<\/p>\n","protected":false},"author":54,"featured_media":13312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,10],"tags":[],"class_list":["post-8603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to implement lazy loading in JQuery with Ruby on Rails<\/title>\n<meta name=\"description\" content=\"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to implement lazy loading in JQuery with Ruby on Rails\" \/>\n<meta property=\"og:description\" content=\"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-03T11:15:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-13T10:36:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Harmisha Prajapati\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harmisha Prajapati\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\"},\"author\":{\"name\":\"Harmisha Prajapati\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7\"},\"headline\":\"How to Implement Lazy Loading in JQuery with Ruby on Rails\",\"datePublished\":\"2020-02-03T11:15:10+00:00\",\"dateModified\":\"2022-12-13T10:36:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\"},\"wordCount\":476,\"commentCount\":11,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg\",\"articleSection\":[\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\",\"name\":\"How to implement lazy loading in JQuery with Ruby on Rails\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg\",\"datePublished\":\"2020-02-03T11:15:10+00:00\",\"dateModified\":\"2022-12-13T10:36:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7\"},\"description\":\"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Lazy load Images in a Rails application\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Implement Lazy Loading in JQuery with Ruby on Rails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7\",\"name\":\"Harmisha Prajapati\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png\",\"caption\":\"Harmisha Prajapati\"},\"description\":\"I am a Ruby on Rails Developer. I like to develop web applications using Ruby and Rails framework. Apart from that in my free time, I like to read novels.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to implement lazy loading in JQuery with Ruby on Rails","description":"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.","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:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/","og_locale":"en_US","og_type":"article","og_title":"How to implement lazy loading in JQuery with Ruby on Rails","og_description":"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2020-02-03T11:15:10+00:00","article_modified_time":"2022-12-13T10:36:36+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg","type":"image\/jpeg"}],"author":"Harmisha Prajapati","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Harmisha Prajapati","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/"},"author":{"name":"Harmisha Prajapati","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7"},"headline":"How to Implement Lazy Loading in JQuery with Ruby on Rails","datePublished":"2020-02-03T11:15:10+00:00","dateModified":"2022-12-13T10:36:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/"},"wordCount":476,"commentCount":11,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg","articleSection":["Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/","url":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/","name":"How to implement lazy loading in JQuery with Ruby on Rails","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg","datePublished":"2020-02-03T11:15:10+00:00","dateModified":"2022-12-13T10:36:36+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7"},"description":"Implementing lazy loading in Jquery can improve page speed and performance. Here\u2019s how you can integrate lazy loading in a Rails application.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/02\/lazy-load-images-rails-application.jpg","width":1920,"height":1280,"caption":"Lazy load Images in a Rails application"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/lazy-load-images-in-rails-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Implement Lazy Loading in JQuery with Ruby on Rails"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/679b29043917ad5a013fcadd40f0dde7","name":"Harmisha Prajapati","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/harmisha-prajapati-150x150.png","caption":"Harmisha Prajapati"},"description":"I am a Ruby on Rails Developer. I like to develop web applications using Ruby and Rails framework. Apart from that in my free time, I like to read novels."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/8603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=8603"}],"version-history":[{"count":3,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/8603\/revisions"}],"predecessor-version":[{"id":18256,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/8603\/revisions\/18256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/13312"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=8603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=8603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=8603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}