{"id":34853,"date":"2025-11-22T21:41:35","date_gmt":"2025-11-22T18:41:35","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34853"},"modified":"2025-11-22T21:41:35","modified_gmt":"2025-11-22T18:41:35","slug":"intersection-observer-api-ile-vue-jste-tembel-yuklenen-gorsel-bileseni-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/intersection-observer-api-ile-vue-jste-tembel-yuklenen-gorsel-bileseni-olusturma\/","title":{"rendered":"Intersection Observer API ile Vue.js’te Tembel Y\u00fcklenen G\u00f6rsel Bile\u015feni Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Intersection Observer API ile Vue.js’te Tembel Y\u00fcklenen G\u00f6rsel Bile\u015feni Olu\u015fturma<\/h2>\n
Web uygulamalar\u0131nda performans, kullan\u0131c\u0131 deneyimi ve SEO i\u00e7in kritik bir fakt\u00f6rd\u00fcr. \u00d6zellikle g\u00f6rsel a\u011f\u0131rl\u0131kl\u0131 sayfalarda, t\u00fcm g\u00f6rsellerin sayfa y\u00fcklendi\u011finde an\u0131nda indirilmesi, sayfa y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir ve kullan\u0131c\u0131lar\u0131n bo\u015f bir ekranla kar\u015f\u0131la\u015fmas\u0131na neden olabilir. \u0130\u015fte bu noktada “tembel y\u00fckleme” (lazy loading) devreye girer. Tembel y\u00fckleme, bir g\u00f6rselin veya di\u011fer medya \u00f6\u011fesinin yaln\u0131zca kullan\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na (viewport) girdi\u011finde veya girmek \u00fczere oldu\u011funda y\u00fcklenmesini sa\u011flayan bir tekniktir.<\/p>\n
Geleneksel olarak, tembel y\u00fckleme i\u015flemleri scroll event listener’lar ve elementin konumu hesaplamalar\u0131yla yap\u0131l\u0131rd\u0131. Ancak bu y\u00f6ntemler genellikle performans sorunlar\u0131na yol a\u00e7abilir ve taray\u0131c\u0131 taraf\u0131ndan optimize edilmez. Neyse ki, modern web taray\u0131c\u0131lar\u0131 art\u0131k bu soruna \u00e7ok daha verimli bir \u00e7\u00f6z\u00fcm sunuyor: Intersection Observer API. Bu rehberde, Intersection Observer API’sini kullanarak Vue.js’te nas\u0131l sa\u011flam ve performansl\u0131 bir tembel y\u00fckleme g\u00f6rsel bile\u015feni olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Intersection Observer API Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n

Intersection Observer API, bir eleman\u0131n k\u00f6k eleman (genellikle taray\u0131c\u0131 g\u00f6r\u00fcnt\u00fc alan\u0131) ile kesi\u015fti\u011fi (intersecting) an\u0131 asenkron olarak g\u00f6zlemlemenizi sa\u011flayan bir taray\u0131c\u0131 API’sidir. Bu API, \u00f6zellikle tembel y\u00fckleme (lazy loading), sonsuz kayd\u0131rma (infinite scrolling) ve reklam g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc takibi gibi senaryolar i\u00e7in tasarlanm\u0131\u015ft\u0131r. Temel amac\u0131, elemanlar\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na girip girmedi\u011fini veya ne kadar\u0131n\u0131n girdi\u011fini y\u00fcksek performansla tespit etmektir.<\/p>\n

Peki, neden Intersection Observer’\u0131 kullanmal\u0131y\u0131z? \u0130\u015fte ba\u015fl\u0131ca nedenler:<\/p>\n

Performans:<\/strong> Geleneksel scroll event listener tabanl\u0131 \u00e7\u00f6z\u00fcmler, her kayd\u0131rma olay\u0131nda DOM manip\u00fclasyonlar\u0131 ve pozisyon hesaplamalar\u0131 yaparak ciddi performans d\u00fc\u015f\u00fc\u015flerine neden olabilir. Intersection Observer ise taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015f\u0131r ve yaln\u0131zca kesi\u015fim durumunda bir geri arama (callback) fonksiyonu tetikler. Bu, \u00e7ok daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/li>\n
Basitlik:<\/strong> Karma\u015f\u0131k pozisyon hesaplamalar\u0131yla u\u011fra\u015fmak yerine, Intersection Observer API’si \u00e7ok daha temiz ve okunabilir bir kod yazman\u0131z\u0131 sa\u011flar. API’nin kullan\u0131m\u0131 olduk\u00e7a sezgiseldir.<\/li>\n
Taray\u0131c\u0131 Optimizasyonu:<\/strong> Taray\u0131c\u0131lar Intersection Observer API’sini kendi i\u00e7lerinde optimize eder. Bu, pil \u00f6mr\u00fc ve genel sistem kaynaklar\u0131 a\u00e7\u0131s\u0131ndan daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/li>\n

Esneklik:<\/strong> Bir eleman\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na tamamen girmesini beklemek yerine, belirli bir e\u015fik de\u011feriyle (threshold) veya k\u00f6k kenar bo\u015fluklar\u0131 (rootMargin) ile eleman\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na girmeden \u00f6nce bile y\u00fcklenmeye ba\u015flamas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n<\/ul>\n
Intersection Observer’\u0131n temel yap\u0131 ta\u015flar\u0131 \u015funlard\u0131r:<\/p>\n
\n
root<\/code>:<\/strong> G\u00f6zlemlenen eleman\u0131n kesi\u015fti\u011fi k\u00f6k eleman. Varsay\u0131lan olarak taray\u0131c\u0131 g\u00f6r\u00fcnt\u00fc alan\u0131d\u0131r (viewport). Bir DOM eleman\u0131 da olabilir.<\/li>\n
rootMargin<\/code>:<\/strong> K\u00f6k eleman\u0131n etraf\u0131ndaki kenar bo\u015fluklar\u0131n\u0131 belirtir. CSS margin \u00f6zelli\u011fi gibi \u00e7al\u0131\u015f\u0131r (\u00f6rn: “10px 20px 30px 40px”). Bu, bir eleman\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na girmeden belirli bir mesafe \u00f6nce y\u00fcklenmesini sa\u011flamak i\u00e7in harika bir yoldur.<\/li>\n
threshold<\/code>:<\/strong> K\u00f6k eleman ile g\u00f6zlemlenen eleman\u0131n kesi\u015fme y\u00fczdesini belirten bir say\u0131 veya say\u0131 dizisi. \u00d6rne\u011fin, 0.1<\/code> eleman\u0131n %10’u g\u00f6r\u00fcn\u00fcr oldu\u011funda, [0, 0.25, 0.5, 0.75, 1]<\/code> ise eleman\u0131n her %25’i g\u00f6r\u00fcn\u00fcr oldu\u011funda geri arama fonksiyonunu tetikler.<\/li>\n<\/ul>\nVue.js’te Temel Bir Tembel Y\u00fckleme G\u00f6rsel Bile\u015feni Olu\u015fturma<\/h2>\n\u015eimdi, Intersection Observer API’sini kullanarak Vue.js’te nas\u0131l temel bir tembel y\u00fckleme g\u00f6rsel bile\u015feni olu\u015fturaca\u011f\u0131m\u0131za bakal\u0131m. Bu bile\u015fen, bir g\u00f6rselin yaln\u0131zca kullan\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fc alan\u0131na girdi\u011finde y\u00fcklenmesini sa\u011flayacak.<\/p>\n Bile\u015fen Yap\u0131s\u0131<\/h3>\nLazyImage.vue<\/code> ad\u0131nda yeni bir Vue bile\u015feni olu\u015ftural\u0131m. Bu bile\u015fen, g\u00f6rselin src<\/code> ve alt<\/code> \u00f6zelliklerini prop olarak alacak. Ayr\u0131ca, g\u00f6rsel y\u00fcklenmeden \u00f6nce g\u00f6sterilecek bir yer tutucu (placeholder) g\u00f6rsel veya bir y\u00fckleme g\u00f6stergesi i\u00e7in de mant\u0131k ekleyece\u011fiz.<\/p>\n \u0130lk olarak, bile\u015fenin temel yap\u0131s\u0131n\u0131 ve gerekli durum (state) de\u011fi\u015fkenlerini tan\u0131mlayal\u0131m:<\/p>\n