আমি আমার নিজস্ব বেসিক পদ্ধতিটি নিয়ে এসেছি যা মনে হয় ঠিক কাজ করে (এখনও অবধি)। এমন কিছু জনপ্রিয় স্ক্রিপ্টের ঠিকানা সম্ভবত এমন এক ডজন জিনিস রয়েছে যা আমি ভাবিনি।
দ্রষ্টব্য - এই সমাধানটি দ্রুত এবং বাস্তবায়নের পক্ষে সহজ তবে কার্য সম্পাদনের পক্ষে অবশ্যই দুর্দান্ত নয়। অপুরভ দ্বারা উল্লিখিত এবং বিকাশকারীদের দ্বারা ব্যাখ্যা করা নতুন ছেদকৃত পর্যবেক্ষককে অবশ্যই অবশ্যই দেখুন যদি কার্য সম্পাদন সমস্যা হয়।
JQuery
$(window).scroll(function() {
$.each($('img'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
নমুনা এইচটিএমএল কোড
<div>
<img src="" data-src="pathtoyour/image1.jpg">
<img src="" data-src="pathtoyour/image2.jpg">
<img src="" data-src="pathtoyour/image3.jpg">
</div>
ব্যাখ্যা করা হয়েছে
পৃষ্ঠাটি যখন স্ক্রল করা হয় তখন পৃষ্ঠার প্রতিটি চিত্র চেক করা হয় ..
$(this).attr('data-src') - যদি ছবিটির বৈশিষ্ট্য থাকে data-src
এবং এই চিত্রগুলি উইন্ডোর নীচ থেকে কত দূরে ..
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
আপনার পছন্দের সাথে + 100 সামঞ্জস্য করুন (- উদাহরণস্বরূপ 100)
var source = $(this).data('src');- data-src=চিত্রটির url এর মান পায়
$(this).attr('src', source); - যে মানটি মধ্যে রাখে src=
$(this).removeAttr('data-src'); - ডেটা-এসআরসি বৈশিষ্ট্যটি সরিয়ে দেয় (যাতে আপনার ব্রাউজার ইতিমধ্যে লোড হওয়া চিত্রগুলির সাথে জড়িত সংস্থানগুলি অপচয় করে না)
বিদ্যমান কোডে যুক্ত করা হচ্ছে
আপনার এইচটিএমএল রূপান্তর করতে, একটি সম্পাদক এ কেবল অনুসন্ধান করুন এবং এর src="সাথে প্রতিস্থাপন করুনsrc="" data-src="