ইন্টারসেকশন অবজারভারের নজরে আসছে

ইন্টারসেকশন অবজারভাররা আপনাকে জানায় যখন একটি পর্যবেক্ষণ করা উপাদান ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা প্রস্থান করে।

Surma

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

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

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

কিভাবে একটি 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() ব্যবহার করা উচিত। এর মানে হল যে আপনার প্রদত্ত কলব্যাকে কলটি কম অগ্রাধিকার এবং অলস সময়ে ব্রাউজার দ্বারা করা হবে৷ এটি একটি সচেতন নকশা সিদ্ধান্ত.

স্ক্রলিং divs

আমি একটি উপাদানের ভিতরে স্ক্রল করার একটি বড় অনুরাগী নই, কিন্তু আমি এখানে বিচার করতে নই, এবং 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 আপনাকে root-এর জন্য মার্জিন নির্দিষ্ট করতে দেয়, কার্যকরভাবে আপনাকে ছেদগুলির জন্য ব্যবহৃত এলাকাটি বৃদ্ধি বা সঙ্কুচিত করতে দেয়। এই মার্জিনগুলি একটি CSS-শৈলী স্ট্রিং ব্যবহার করে নির্দিষ্ট করা হয়, á la "10px 20px 30px 40px" , যথাক্রমে উপরে, ডান, নীচে এবং বাম মার্জিন নির্দিষ্ট করে। সারসংক্ষেপে, IntersectionObserver অপশন struct নিম্নলিখিত বিকল্পগুলি অফার করে:

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 ব্যবহার শুরু করতে পারেন! আপনি কি নিয়ে এসেছেন তা আমাদের বলুন।