সমাধান মোড়ানোর জন্য আমি একটি দুর্দান্ত ফাংশন সন্ধান করার জন্য কিছু সময় ব্যয় করেছি। যাইহোক, একক পৃষ্ঠায় বা কোনও সাইট জুড়ে একাধিক সামগ্রী লোড করার সময় এটি আমার কাছে সবচেয়ে ভাল সমাধান বলে মনে হয়।
ফাংশন:
function ifViewLoadContent(elem, LoadContent)
{
var top_of_element = $(elem).offset().top;
var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
if(!$(elem).hasClass("ImLoaded")) {
$(elem).load(LoadContent).addClass("ImLoaded");
}
}
else {
return false;
}
}
তারপরে আপনি স্ক্রোলের উইন্ডোটি ব্যবহার করে ফাংশনটি কল করতে পারেন (উদাহরণস্বরূপ, আপনি এটির মতো একটি ক্লিক ইত্যাদির সাথেও আবদ্ধ করতে পারেন যেমন আমি করি, কাজেই ফাংশন):
ব্যবহার করা:
$(window).scroll(function (event) {
ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html");
ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html");
});
এই পদ্ধতির ডিভগুলিও স্ক্রোলিং ইত্যাদির জন্যও কাজ করা উচিত আশা করি উপরের প্রশ্নে আপনি এই বিষয়বস্তুটি বিভাগগুলিতে লোড করতে ব্যবহার করতে পারেন, সম্ভবত সংযোজন এবং বাল্ক ফিডের চেয়ে সমস্ত চিত্র চিত্র ফিড করতে পারে।
Https://www.taxforcalculator.com এ ওভারহেড হ্রাস করার জন্য আমি এই পদ্ধতির ব্যবহার করেছি । এটি কৌশলটি মরে গেছে, আপনি যদি সাইটটির দিকে তাকান এবং উপাদান ইত্যাদি পরিদর্শন করেন তবে আপনি ক্রোমে পৃষ্ঠা উদাহরণের উপর প্রভাব দেখতে পারেন (উদাহরণ হিসাবে)।
new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);
প্রথম লাইনটি উপাদানগুলিকে সুন্দর উপায়ে যুক্ত করে, দ্বিতীয়টি আশ্বাস দেয় যে আপনার ফাংশনটি পৃষ্ঠার নীচে কখনও থামবে না।