IntersectionObserver ভিউতে আসছে

IntersectionObservers আপনাকে জানায় যে কখন কোনও পর্যবেক্ষণ করা এলিমেন্ট ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা সেখান থেকে বেরিয়ে যায়।

Surma

Browser Support

  • Chrome: 51.
  • Edge: 15.
  • Firefox: 55.
  • Safari: 12.1.

Source

ধরা যাক, আপনার DOM-এর কোনও এলিমেন্ট কখন দৃশ্যমান ভিউ-পোর্টে প্রবেশ করে তা আপনি ট্র্যাক করতে চান। আপনি হয়ত এটি করতে চাইবেন যাতে ঠিক সময়ে ছবি ধীরে ধীরে লোড করতে পারেন অথবা ব্যবহারকারী কোনও নির্দিষ্ট বিজ্ঞাপন ব্যানার দেখছেন কিনা তা জানতে পারেন। আপনি স্ক্রল ইভেন্ট হুক-আপ করে অথবা নির্দিষ্ট সময় অন্তর টাইমার ব্যবহার করে এবং সেই এলিমেন্টে getBoundingClientRect() কল করে এটি করতে পারেন।

তবে, এই পদ্ধতিটি অত্যন্ত ধীরগতির কারণ getBoundingClientRect()-এ প্রতিটি কল ব্রাউজারকে পুরো পৃষ্ঠাটি আবার লেআউট করতে বাধ্য করে এবং আপনার ওয়েবসাইটে যথেষ্ট জ্যাঙ্ক তৈরি করবে। আপনার সাইট iframe-এর মধ্যে লোড হচ্ছে এবং ব্যবহারকারী কখন কোনও এলিমেন্ট দেখতে পাবেন তা জানতে চাইলে, বিষয়টি প্রায় অসম্ভব হয়ে পড়ে। সিঙ্গেল অরিজিন মডেল এবং ব্রাউজার আপনাকে iframe থাকা ওয়েব পেজ থেকে কোনও ডেটা অ্যাক্সেস করতে দেবে না। এটি বিজ্ঞাপনের ক্ষেত্রে একটি সাধারণ সমস্যা, যেমন, iframe ব্যবহার করে ঘন ঘন লোড করা হয়।

এই দৃশ্যমানতা টেস্ট আরও দক্ষ করে তোলার জন্যই IntersectionObserver ডিজাইন করা হয়েছে এবং এটি সব আধুনিক ব্রাউজারে কাজ করে। পর্যবেক্ষণ করা কোনও এলিমেন্ট ব্রাউজারের ভিউপোর্টে প্রবেশ করলে বা সেখান থেকে বেরিয়ে গেলে IntersectionObserver আপনাকে তা জানায়।

Iframe-এর দৃশ্যমানতা

IntersectionObserver কীভাবে তৈরি করবেন

API-টি বেশ ছোট এবং উদাহরণের মাধ্যমে সবচেয়ে ভালোভাবে বর্ণনা করা হয়েছে:

const io = new IntersectionObserver(entries => {
  console.log(entries);
}, {
  /* Using default options. Details below */
});

// Start observing an element
io.observe(element);

// Stop observing an element
// io.unobserve(element);

// Disable entire IntersectionObserver
// io.disconnect();

IntersectionObserver-এর জন্য ডিফল্ট বিকল্প ব্যবহার করে, এলিমেন্ট আংশিকভাবে ভিউতে এলে এবং এটি ভিউপোর্ট থেকে সম্পূর্ণভাবে চলে গেলে, আপনার কলব্যাক কল করা হবে।

আপনাকে একাধিক এলিমেন্ট পর্যবেক্ষণ করতে হলে, observe() একাধিকবার কল করে একই IntersectionObserver ইনস্ট্যান্স ব্যবহার করে একাধিক এলিমেন্ট পর্যবেক্ষণ করা সম্ভব এবং এটি করার পরামর্শ দেওয়া হয়।

আপনার কলব্যাকে একটি entries প্যারামিটার পাস করা হয় যা IntersectionObserverEntry অবজেক্টের একটি অ্যারে। এই ধরনের প্রতিটি অবজেক্টে আপনার লক্ষ্য করা এলিমেন্টের মধ্যে একটির জন্য আপডেট করা ইন্টারসেকশন ডেটা থাকে।

🔽[IntersectionObserverEntry]
    time: 3893.92
    🔽rootBounds: ClientRect
        bottom: 920
        height: 1024
        left: 0
        right: 1024
        top: 0
        width: 920
    🔽boundingClientRect: ClientRect
    // ...
    🔽intersectionRect: ClientRect
    // ...
    intersectionRatio: 0.54
    🔽target: div#observee
    // ...

rootBounds হল রুট এলিমেন্টে getBoundingClientRect() কল করার ফলাফল, যা ডিফল্ট হিসেবে ভিউপোর্ট। boundingClientRect হল পর্যবেক্ষণ করা এলিমেন্টে কল করা getBoundingClientRect()-এর ফলাফল। intersectionRect হল এই দুটি আয়তক্ষেত্রের ইন্টারসেকশন এবং এটি আপনাকে কার্যকরভাবে বলে যে, লক্ষ্য করা এলিমেন্টের কোন অংশ দেখা যাচ্ছে। intersectionRatio ঘনিষ্ঠভাবে সম্পর্কিত এবং এলিমেন্টের কতটা দেখা যাচ্ছে তা আপনাকে জানায়। এই তথ্য আপনার কাছে থাকলে, আপনি এখন স্ক্রিনে দৃশ্যমান হওয়ার ঠিক আগে অ্যাসেটের জাস্ট-ইন-টাইম লোডিংয়ের মতো ফিচার প্রয়োগ করতে পারবেন। দক্ষতার সাথে।

ইন্টারসেকশন রেশিও।

IntersectionObserver অ্যাসিঙ্ক্রোনাসভাবে ডেটা ডেলিভার করে এবং আপনার কলব্যাক কোড মূল থ্রেডে রান করবে। এছাড়াও, স্পেসিফিকেশনে বলা হয়েছে যে IntersectionObserver ইমপ্লিমেন্টেশনে requestIdleCallback() ব্যবহার করা উচিত। এর অর্থ হল, আপনার প্রদান করা কলব্যাকে কল করার বিষয়টি কম অগ্রাধিকারের এবং ব্রাউজারটি নিষ্ক্রিয় থাকাকালীন এটি করা হবে। এটি একটি সচেতন ডিজাইন সিদ্ধান্ত।

স্ক্রল করা যায় এমন div

কোনও এলিমেন্টের মধ্যে স্ক্রল করা আমার খুব একটা পছন্দ নয়, তবে আমি এখানে বিচার করতে আসিনি এবং IntersectionObserver-ও আসেনি। options অবজেক্টে root বিকল্প থাকে যা আপনাকে রুট হিসেবে ভিউপোর্টের বিকল্প নির্ধারণ করতে দেয়। এটি মনে রাখা গুরুত্বপূর্ণ যে root-কে সব পর্যবেক্ষণ করা এলিমেন্টের পূর্বপুরুষ হতে হবে।

সবকিছু ইন্টারসেক্ট করুন!

না! খারাপ ডেভেলপার! এটি আপনার ব্যবহারকারীর CPU সাইকেলের সচেতন ব্যবহার নয়। উদাহরণ হিসেবে, একটি ইনফিনিট স্ক্রলারের কথা ভাবা যাক: এই পরিস্থিতিতে, DOM-এ সেন্টিনেল যোগ করা এবং সেগুলি পর্যবেক্ষণ (এবং রিসাইকেল!) করা অবশ্যই বাঞ্ছনীয়। ইনফিনিট স্ক্রলারের শেষ আইটেমের কাছাকাছি আপনাকে একটি সেন্টিনেল যোগ করতে হবে। সেই সেন্টিনেল দেখা গেলে, আপনি ডেটা লোড করতে, পরবর্তী আইটেম তৈরি করতে, DOM-এ সেগুলি অ্যাটাচ করতে এবং সেই অনুযায়ী সেন্টিনেলকে আবার পজিশন করতে কলব্যাক ব্যবহার করতে পারবেন। আপনি যদি সেন্টিনেল সঠিকভাবে রিসাইকেল করেন, তাহলে observe()-এ অতিরিক্ত কল করার প্রয়োজন নেই। IntersectionObserver কাজ করতে থাকে।

ইনফিনিট স্ক্রলার

আরও আপডেট চাই

আগে যেমন উল্লেখ করা হয়েছে, পর্যবেক্ষণ করা এলিমেন্ট আংশিকভাবে ভিউতে এলে কলব্যাক একবার ট্রিগার করা হবে এবং ভিউপোর্ট থেকে চলে গেলে আরেকবার ট্রিগার করা হবে। এইভাবে IntersectionObserver আপনাকে "এলিমেন্ট X কি ভিউতে আছে?" প্রশ্নের উত্তর দেয়। তবে, কিছু ক্ষেত্রে এটি যথেষ্ট নাও হতে পারে।

সেখানেই threshold বিকল্পটি কাজে আসে। এটি আপনাকে intersectionRatio থ্রেশহোল্ডের একটি অ্যারে নির্ধারণ করতে দেয়। intersectionRatio এইসব ভ্যালুর কোনও একটি ক্রস করলেই আপনার কলব্যাক কল করা হবে। threshold-এর ডিফল্ট ভ্যালু হল [0], যা ডিফল্ট অ্যাকশন ব্যাখ্যা করে। আমরা যদি threshold থেকে [0, 0.25, 0.5, 0.75, 1]-এ পরিবর্তন করি, তাহলে এলিমেন্টের অতিরিক্ত এক চতুর্থাংশ দৃশ্যমান হওয়ার সাথে সাথে আমরা বিজ্ঞপ্তি পাব:

থ্রেশহোল্ড অ্যানিমেশন।

অন্য কোনও বিকল্প আছে?

বর্তমানে, উপরে তালিকাভুক্ত বিকল্পগুলি ছাড়াও আরও একটি বিকল্প রয়েছে। rootMargin আপনাকে রুটের জন্য মার্জিন নির্দিষ্ট করার অনুমতি দেয়, কার্যকরভাবে আপনাকে ইন্টারসেকশনের জন্য ব্যবহৃত এলাকা বাড়াতে বা কমাতে দেয়। এই মার্জিনগুলি CSS-স্টাইল স্ট্রিং, á la "10px 20px 30px 40px" ব্যবহার করে নির্দিষ্ট করা হয়, যা যথাক্রমে উপরের, ডান, নিচের এবং বাম মার্জিন নির্দিষ্ট করে। সংক্ষেপে, IntersectionObserver বিকল্প স্ট্রাক্ট নিম্নলিখিত বিকল্পগুলি অফার করে:

new IntersectionObserver(entries => {/* … */}, {
  // The root to use for intersection.
  // If not provided, use the top-level document's viewport.
  root: null,
  // Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
  // If an explicit root element is specified, components may be percentages of the
  // root element size.  If no explicit root element is specified, using a
  // percentage is an error.
  rootMargin: "0px",
  // Threshold(s) at which to trigger callback, specified as a ratio, or list of
  // ratios, of (visible area / total area) of the observed element (hence all
  // entries must be in the range [0, 1]).  Callback will be invoked when the
  // visible ratio of the observed element crosses a threshold in the list.
  threshold: [0],
});

<iframe> ম্যাজিক

IntersectionObserver বিশেষভাবে বিজ্ঞাপন পরিষেবা এবং সোশ্যাল নেটওয়ার্ক উইজেটের কথা মাথায় রেখে ডিজাইন করা হয়েছে, যা প্রায়শই <iframe> এলিমেন্ট ব্যবহার করে এবং সেগুলি ভিউতে আছে কিনা তা জানার মাধ্যমে উপকৃত হতে পারে। কোনও <iframe> যদি তার কোনও একটি এলিমেন্ট পর্যবেক্ষণ করে, তাহলে <iframe> স্ক্রল করা এবং <iframe> সহ উইন্ডো স্ক্রল করা, উভয় ক্ষেত্রেই উপযুক্ত সময়ে কলব্যাক ট্রিগার হবে। তবে, পরের ক্ষেত্রে, বিভিন্ন অরিজিনে ডেটা লিক হওয়া এড়াতে rootBounds-কে null-এ সেট করা হবে।

IntersectionObserver কী নয়?

মনে রাখবেন, IntersectionObserver ইচ্ছাকৃতভাবেই পিক্সেল পারফেক্ট বা কম লেটেন্সি নয়। স্ক্রল-নির্ভর অ্যানিমেশনের মতো প্রচেষ্টা বাস্তবায়নের জন্য সেগুলি ব্যবহার করা ব্যর্থ হতে বাধ্য, কারণ ডেটা—কঠোরভাবে বলতে গেলে—আপনি এটি ব্যবহার করার সময় পর্যন্ত পুরনো হয়ে যাবে। IntersectionObserver-এর আসল ব্যবহারের উদাহরণ সম্পর্কে ব্যাখ্যা-তে আরও বিবরণ আছে।

কলব্যাকে আমি কতটা কাজ করতে পারি?

সংক্ষিপ্ত ও মিষ্টি: কলব্যাকে খুব বেশি সময় ব্যয় করলে আপনার অ্যাপ ল্যাগ করবে—সব সাধারণ অনুশীলন প্রযোজ্য।

এগিয়ে যাও এবং তোমার উপাদানগুলিকে ছেদ করো

IntersectionObserver-এর জন্য ব্রাউজার সাপোর্ট ভালো, কারণ এটি সব আধুনিক ব্রাউজারে উপলভ্য। প্রয়োজন হলে, পুরনো ব্রাউজারে পলিফিল ব্যবহার করা যেতে পারে এবং এটি WICG-এর রিপোজিটরিতে উপলভ্য। অবশ্যই, আপনি সেই পলিফিল ব্যবহার করে পারফর্ম্যান্সের সুবিধা পাবেন না যা একটি নেটিভ ইমপ্লিমেন্টেশন আপনাকে দেবে।

আপনি এখনই IntersectionObserver ব্যবহার করা শুরু করতে পারবেন! আপনি কী ভেবেছেন তা আমাদের জানান।