روش ساخت صفحه های وب با امکان lazy loading ؟
سلام به همه دوستان
آیا کسی با lazy loading کار کرده؟
من میخوام صفحه وبم هنگام لود شدن اولیه فقط مثلا 20 تا از پست هام نمایش داده بشه و وقتی اسکرول رو میبرم پایین یه مقدار دیگش لود بشه
مثل سرویس پرسش و پاسخ همین سایت
ممنون میشم ازتون اگه کمکم کنید
یا سورس کد بزارید یا لینک سایت ، با تشکر از همتون
سلام اتفاقا این موضوع بسیار مهمی است و دوستانی که کار کرده اند لطفا راهنمایی کنند.
با استفاده از دستور Jquery زیر زمانی که اسکرول به انتها برسد را متوجه خواهید شد :
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
alert("bottom!");
}
};
حالا به جای alert میتونید کد AJAX بنویسید که بره به PHP بگه مثلا ادامه لیست رو بده ، برای اینکه ادامه لیست رو بگیرید باید در کئوری دیتابیس از Limit و index استفاده کنید و مشخص کنید از رکورد شماره چند به بعد و با چه تعدادی میخواید .
مثلا شما 10 تا آیتم رو اولین بار در صفحه دارید ، دفعه بعد میگید از آیتم 11 با Limit 10 رو بده در این شرایط سرور برای شما از خونه 11 تا 20 رو میگیره .
در نهایتم با کد append آیتم های چدید به به Div کانتنت اضافه میکنید.
سلام به دوستان عزیز
سورسی که برای این کار جواب گرفتم رو دراختیار دوستان می گذارم آرزوی موفقیت برای همه
<?
?>
<body>
<input type="text" style="display: none;width:100px;height: 50px" class="keyword" placeholder="جستجو" value="<?=$keyword?>" autocomplete="off">
<div id="paginationUpdate"></div>
<div id="noMoreQuestion" style="display: none;text-align: center;">
<div style="color: #ffcc80;font-size: 14pt !important;line-height: 28pt !important;">کلیپ بیشتری برای نمایش نمی باشد.</div>
</div>
<div id="lazyloading-logo" style="display: none">
<img src="/asset/images/empty/empty-profile/empty-profile-24.png">
</div>
</body>
<script>
var count=12;
var startIndex = 0;
var canLoadMore = true;
var loaderInprogress = false;
$(function () {
var keyword = $(".keyword").val();
console.log(keyword);
compelete_search(keyword);
});
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $('#paginationUpdate').height()) {
if (!inProgress) {
startIndex += 12;
var keyword = $(".keyword").val();
console.log(keyword);
compelete_search(keyword);
}
inProgress = true;
setTimeout(function () {
inProgress = false;
}, 300);
}
});
function compelete_search(keyword) {
var keyword = $(".keyword").val();
if (!canLoadMore) {
return;
}
if (loaderInprogress) {
return;
}
loaderInprogress = true;
$("#lazyloading-logo").show();
$.ajax({
url: '/menu/Complete_Search_ajax/',
method: 'POST',
dataType: 'json',
data: {
keyword:keyword,
startIndex: startIndex,
count: count
},
success: function (data) {
loaderInprogress = false;
if (data.status == true) {
// $("#paginationUpdate").html(output.html);
var $questionList = $("#paginationUpdate");
var $questions = $(data.html);
$questionList.append($questions);
} else {
canLoadMore = false;
$("#noMoreQuestion").show();
$("#lazyloading-logo").hide();
}
}
});
}
</script>
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
