我正在開發(fā)類似 quora 的社交網(wǎng)站，當(dāng)您拖動(dòng)到頁面底部時(shí)，將加載新內(nèi)容。但在我的應(yīng)用程序中，會(huì)有所不同，我的頁面將有一個(gè)更多按鈕而不是滾動(dòng)。每當(dāng)用戶單擊“更多”按鈕時(shí)，底部都會(huì)加載新內(nèi)容。在我的 PHP 代碼中，我從數(shù)據(jù)庫中無限制地獲取所有內(nèi)容，然后我使用 jQuery 來切片并讓我的頁面加載更多這樣的項(xiàng)目。$("#loadMore").on('click', function (e) { e.preventDefault(); $(".more:hidden").slice(0, 10).slideDown(); if ($(".more:hidden").length == 0) { $("#loadMore").fadeOut('slow'); } });但我不知道這是否是最佳實(shí)踐，雖然它現(xiàn)在對我很有效，但我相信將來我可能會(huì)在加載我的頁面時(shí)遇到困難，我認(rèn)為我的頁面在加載時(shí)會(huì)變得非常慢。我使用 twig 模板引擎，因此我無法從后端腳本中回顯數(shù)據(jù)并使用 ajax 顯示因?yàn)槲业那岸丝雌饋硐襁@樣。<div class="card blogBox moreBox" id="single_user_card"><div class="card-header card-header-borderless d-flex justify-content-between"> <div class="text-small "> <ul class="list-inline"> <li class="list-inline-item"> <img alt="Image" src="{{ p.author_avatar }}" class="avatar avatar-sm" /> </li> <li class="list-inline-item font-weight-bold"> {{ p.author_username |title |raw }} <p class="text-muted text-small post-time font-weight-light">{{ p.post_date |time_diff }}</p> </li> <li class=""></li> </ul> </div> <div class="d-lg-flex justify-content-end"> <div class="dropdown"> <a class="dark-link" href="#" id="share_dropdown_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="icon-menu"></i> </a> <div class="dropdown-menu" aria-labelledby="share_dropdown_menu"> <span postid="{{APPURL}}/article/{{p.id}}/{{p.post_name}}/{{ base64_encode('this token is valid for one hour') }}"> <a href="javascript:void(0);" class="dropdown-item copy_link"> <i class="icon-share"></i> Copy link </a> </span> {% for u in user_details %} {% if u.id == 2 or u.id == 1 %} <a href="/deletepost?author={{p.post_author}}&postid={{p.id}}" class="dropdown-item"> <i class="icon-trash"></i> Delete Post</a> {% endif %} {% endfor %} </div> </div> </div></div>
如何使用 Jquery 或 Ajax 從數(shù)據(jù)庫加載更多內(nèi)容
30秒到達(dá)戰(zhàn)場
2022-07-22 09:40:23
