{"id":8316,"date":"2025-01-01T14:30:12","date_gmt":"2025-01-01T11:30:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/"},"modified":"2025-01-01T14:30:12","modified_gmt":"2025-01-01T11:30:12","slug":"tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/","title":{"rendered":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi"},"content":{"rendered":"<p><body><\/p>\n<p>Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi<\/p>\n<p>Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim.  Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz.  Ayr\u0131ca,  SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.<\/p>\n<p>\u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.  Her bir g\u00f6r\u00fcnt\u00fc i\u00e7in, src yerine data-src \u00f6zniteli\u011fini kullanarak g\u00f6r\u00fcnt\u00fcn\u00fcn ger\u00e7ek URL&#8217;sini saklayaca\u011f\u0131z.  Bu sayede, sayfa ilk y\u00fcklendi\u011finde taray\u0131c\u0131 bu g\u00f6r\u00fcnt\u00fcleri indirmeyecektir.<\/p>\n<pre><code class=\"language-html\">\n&lt;div class=\"grid grid-cols-3 gap-4\"&gt;\n  &lt;img class=\"lazyload\" data-src=\"image1.jpg\" alt=\"G\u00f6r\u00fcnt\u00fc 1\"&gt;\n  &lt;img class=\"lazyload\" data-src=\"image2.jpg\" alt=\"G\u00f6r\u00fcnt\u00fc 2\"&gt;\n  &lt;img class=\"lazyload\" data-src=\"image3.jpg\" alt=\"G\u00f6r\u00fcnt\u00fc 3\"&gt;\n  &lt;!-- Daha fazla g\u00f6r\u00fcnt\u00fc --&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u015eimdi ise, Tailwind CSS ile galerimizi \u015fekillendirelim.  Yukar\u0131daki HTML kodunda,  grid ve gap s\u0131n\u0131flar\u0131n\u0131 kullanarak d\u00fczenli bir g\u00f6r\u00fcnt\u00fc d\u00fczeni olu\u015fturduk.  \u0130htiya\u00e7lar\u0131n\u0131za g\u00f6re bu stili \u00f6zelle\u015ftirebilirsiniz.<\/p>\n<p>Son olarak, JavaScript ile tembel y\u00fckleme i\u015flemini ger\u00e7ekle\u015ftirece\u011fiz.  A\u015fa\u011f\u0131daki kod, sayfadaki t\u00fcm .lazyload s\u0131n\u0131f\u0131na sahip img elementlerini tespit eder ve viewport&#8217;a girdiklerinde src \u00f6zniteliklerini data-src \u00f6znitelikleriyle de\u011fi\u015ftirir. Bu sayede, g\u00f6r\u00fcnt\u00fcler ancak g\u00f6r\u00fcn\u00fcr hale geldiklerinde y\u00fcklenir.<\/p>\n<pre><code class=\"language-javascript\">\nconst lazyImages = document.querySelectorAll(\".lazyload\");\n\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach((entry) => {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      observer.unobserve(img);\n    }\n  });\n});\n\nlazyImages.forEach((img) => {\n  observer.observe(img);\n});\n<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131nda, Intersection Observer API&#8217;sini kulland\u0131k. Bu API, bir elementin viewport&#8217;a girip \u00e7\u0131kmas\u0131n\u0131 tespit etmemizi sa\u011flar.  Bu sayede, yaln\u0131zca g\u00f6r\u00fcn\u00fcr olan g\u00f6r\u00fcnt\u00fcler y\u00fcklenir ve performans en \u00fcst d\u00fczeye \u00e7\u0131kar\u0131l\u0131r.  Daha detayl\u0131 bilgi i\u00e7in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" target=\"_blank\">MDN d\u00f6k\u00fcmanlar\u0131n\u0131<\/a> inceleyebilirsiniz.<\/p>\n<p>Bu basit ad\u0131mlarla, h\u0131zl\u0131 ve performansl\u0131 bir tembel y\u00fcklemeli g\u00f6r\u00fcnt\u00fc galerisi olu\u015fturmu\u015f olduk.  Bu tekni\u011fi kendi projelerinizde kullanarak web sitenizin h\u0131z\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz.  Daha fazla web geli\u015ftirme ipucu ve bilgi i\u00e7in <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">kendi web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n<p>Unutmay\u0131n ki,  g\u00f6r\u00fcnt\u00fclerin boyutlar\u0131n\u0131 optimize etmek ve uygun bir dosya format\u0131 se\u00e7mek de performans\u0131 art\u0131rmada \u00f6nemlidir.  Bu konuda daha fazla bilgi i\u00e7in ilgili kaynaklar\u0131 ara\u015ft\u0131rabilirsiniz.<\/p>\n<p>#Etiketler<br \/>\ntembel y\u00fckleme, lazy loading, g\u00f6r\u00fcnt\u00fc galerisi, image gallery, Tailwind CSS, JavaScript, performans, SEO, web geli\u015ftirme<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8316","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-01T11:30:12+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi\",\"datePublished\":\"2025-01-01T11:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\"},\"wordCount\":399,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\",\"name\":\"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-01-01T11:30:12+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.","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:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-01-01T11:30:12+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"2 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi","datePublished":"2025-01-01T11:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/"},"wordCount":399,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/","name":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-01-01T11:30:12+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size performans\u0131 art\u0131rmak i\u00e7in olmazsa olmaz olan tembel y\u00fcklemeli (lazy loading) bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. Bu tekni\u011fi kullanarak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayabilir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. Ayr\u0131ca, SEO a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck avantajlar elde edeceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-tembel-yuklemeli-goruntu-galerisi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ve JavaScript ile Tembel Y\u00fcklemeli G\u00f6r\u00fcnt\u00fc Galerisi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=8316"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8316\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=8316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=8316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=8316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}