HTML-এ একটি অ্যাট্রিবিউট আছে preload নামে যা আপনাকে ব্রাউজারকে একটি হিন্ট দিতে দেয় কীভাবে, এবং আরও গুরুত্বপূর্ণ, কখন অ্যাসেট লোড করবে যখন একটি পেজ লোড হয়।
preload অ্যাট্রিবিউটটি বেশ কিছু HTML এলিমেন্টে ব্যবহার করা যায়। উদাহরণস্বরূপ, আপনি এটাকে <link> এলিমেন্টে যোগ করতে পারেন ব্রাউজারকে আপনার CSS স্টাইলশীটের জন্য আর্লি ফেচ ইনিশিয়েট করতে।
না preload অ্যাট্রিবিউট আপনার <link>-এ এভাবে ব্যবহার করুন (যেমন কিছু ওয়েবসাইট রিকমেন্ড করে):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">কারণ উপরের কোড শুধু আপনার স্টাইলশীট প্রিলোড করে, এটা প্রয়োগ করে না।
বদলে, আপনার স্টাইলশীটকে এবং প্রিলোড এবং প্রয়োগ করতে (যতক্ষণ না প্রিলোড হয়ে যায়), আপনি একটি ইনলাইন JS onload ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন আপনার <link> এলিমেন্টে:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">JS onload ইভেন্ট হ্যান্ডলারটি তখন লিংক এলিমেন্টের rel="preload" অ্যাট্রিবিউটকে rel="stylesheet" চেঞ্জ করবে দ্রুত ইটি লোড হওয়া শেষ হলে।
উপরের কনফিগারেশন দিয়ে, preload সাপোর্ট করার ব্রাউজারগুলো CSS স্টাইলশীট আগে ডাউনলোড করা শুরু করবে চেয়ে আপনি যদি অ্যাট্রিবিউটটি ব্যবহার না করতেন।
ব্রাউজার সাপোর্ট
preload অ্যাট্রিবিউট Firefox-এ এখনও সাপোর্টেড নয় (অদ্ভুত), কিন্তু বাকি সব মডার্ন ব্রাউজারে কাজ করে। আপনি এখনও preload অ্যাট্রিবিউট ব্যবহার করতে পারেন, কিন্তু সেটি শুধু Firefox-এ আপনার CSS প্রি-ফেচ করবে না (নরমালি লোড হবে)।
