এই মুহূর্তে আমি দুটি বিকল্প পেয়েছি, এই সমস্যাটি সমাধান করার জন্য: সমস্ত চিত্রের প্রাথমিক এসসিআর একটি ডেটা বেস হওয়ার জন্য খালি ছবি image৪
এই বিকল্পটির জন্য কেবল একটি আধুনিক ব্রাউজারের প্রয়োজন নেই, তবে এটি ক্লায়েন্টের দিক থেকে ধীরে ধীরে হতে পারে যেহেতু ব্রাউজারটি অবশ্যই চিত্রটি তৈরি করতে ইমেজ ডেটা ডিকোড করে।
খালি 1x1 চিত্রের url হওয়ার জন্য সমস্ত চিত্রের প্রাথমিক এসআরসি
এটি ঠিক আছে যে সমস্ত চিত্র স্লটগুলির জন্য ফাঁকা চিত্র URL টি একই URL এবং এটির একটি দীর্ঘ ক্যাশে আজীবন এইচটিটিপি শিরোনাম "ক্যাশে-নিয়ন্ত্রণ" সংজ্ঞায়িত রয়েছে provided এটির সাথে সমস্যাটি হ'ল নতুন চিত্র ফাইলগুলি লোড হওয়ার সাথে সাথে, চিত্রের স্কোয়ারগুলি নতুন আকারে চলে যাবে যা ব্যবহারকারীর অভিজ্ঞতাটিকে দুর্দান্ত হিসাবে তৈরি করতে পারে না।
প্রায় নিখুঁত ধারণাটি হ'ল ...
পৃষ্ঠাটি শুরু হয়ে গেলে, স্থির আকারের বাক্স সহ একটি গ্রিড উপস্থাপন করুন যা প্রতিটি চিত্রকে সামঞ্জস্য করতে পারে। পুরো গ্রিডটি স্ক্রিনে ফিট না হলে এটি ঠিক আছে। তারপরে এমন জাভাস্ক্রিপ্ট তৈরি করুন যা এইচটিএমএল লোডের পরে কার্যকর হয় এবং সেই জাভাস্ক্রিপ্টে একটি নতুন চিত্র উপাদান তৈরি করুন এবং এটি গ্রিডের প্রতিটি কক্ষে সংযুক্ত করুন তারপরে চিত্রের উত্সটি সঠিক চিত্র ফাইলটিতে সেট করুন। প্রথম পর্দাটি পূর্ণ না হওয়া পর্যন্ত এটি করুন। তারপরে জাভাস্ক্রিপ্টের মধ্যে স্ক্রোলিং সনাক্ত করুন এবং তারপরে যখন স্ক্রোলিং ঘটে তখন নতুন ঘরগুলির জন্য উপরের প্রক্রিয়াটি পুনরাবৃত্তি করুন।
এখন আপনি যদি সেরাের সেরাটি চান, এবং গুণমান একটি বিশাল উদ্বেগ নয়, তবে আমি যা প্রস্তাব করি (তা আমি আমার সাইটেও প্রয়োগ করেছি) একটি গ্রিড তৈরি করে সেটাকে সেট করা হবে যে সেই গ্রিডের ব্যাকগ্রাউন্ড চিত্রটি একটি সমস্ত চিত্রের স্প্রিট শীট চিত্রগুলির স্কোয়ার হিসাবে ফর্ম্যাট করা। এই পদ্ধতিটি নমনীয় এবং দ্রুত লোড করার কারণে সমস্ত চিত্রের জন্য একটি অনুরোধ প্রয়োজন।
আপনি যদি দ্রুত রুটে যেতে চান তবে ব্যবহার করতে এখানে একটি টেমপ্লেট এইচটিএমএল। মাত্র দুটি অনুরোধ করা হয়। এইচটিএমএল কোড এবং একটি চিত্র। এই কোডটিতে, আমি ধরে নিচ্ছি যে শীট থেকে প্রতিটি চিত্র প্রস্থে 100 পিক্সেল এবং উচ্চতায় 200 পিক্সেল এবং প্রতিটি চিত্র কোনও ফাঁক ছাড়াই একে অপরের পাশে পুরোপুরিভাবে সাজানো আছে।
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
আমার কোডে আমি 3 টি বিন্দু যুক্ত করেছি। এর অর্থ আপনি আপনার স্প্রিট শিটটিতে কেবলমাত্র এক সারি ইমেজ রয়েছে এমন শর্ত রয়েছে যে প্রতিবারের সংখ্যা বাড়িয়ে এবং অবস্থানটি 100 দ্বারা বাড়িয়ে আপনি চিত্র যুক্ত করতে পারেন keep এছাড়াও, অপেরা হিসাবে কিছু ব্রাউজারের সাহায্যে আপনার পটভূমির অবস্থান মানগুলির সামনে কাজ করার জন্য একটি নেতিবাচক চিহ্ন যুক্ত করতে হবে।