<track id="bppxv"><mark id="bppxv"><var id="bppxv"></var></mark></track>

      <track id="bppxv"></track><noframes id="bppxv">
      <track id="bppxv"></track>

          <pre id="bppxv"></pre><noframes id="bppxv"><cite id="bppxv"><mark id="bppxv"></mark></cite><span id="bppxv"><cite id="bppxv"><meter id="bppxv"></meter></cite></span> <th id="bppxv"><delect id="bppxv"><mark id="bppxv"></mark></delect></th>

                  <pre id="bppxv"></pre>

                  国产美女亚洲精品久久久-自拍偷自拍亚洲精品牛影院-国产麻豆福利AV在线观看

                    <track id="bppxv"><mark id="bppxv"><var id="bppxv"></var></mark></track>

                      <track id="bppxv"></track><noframes id="bppxv">
                      <track id="bppxv"></track>

                          <pre id="bppxv"></pre><noframes id="bppxv"><cite id="bppxv"><mark id="bppxv"></mark></cite><span id="bppxv"><cite id="bppxv"><meter id="bppxv"></meter></cite></span> <th id="bppxv"><delect id="bppxv"><mark id="bppxv"></mark></delect></th>

                                  <pre id="bppxv"></pre>

                                  無限滾動列表頁優化策略

                                  青島網站建設    發布日期:2021-08-05

                                  無限滾動是目錄列表頁的一種常用翻頁模式,無限滾動技術使用戶在沒有打斷和額外交互的情況下滾動列表不斷瀏覽新內容。在帶來沉浸式瀏覽體驗的同時,也存在一些問題,青島網站建設將針對這些問題給出優化建議,打造一個近乎完美的瀏覽體驗過程。

                                  為什么要使用無限滾動技術

                                  能夠有效的提升頁面權重和用戶體驗:

                                  當資源數量有限(通常15-100個資源最為合適)時,可以通過渲染技術將后臺數據全部渲染到html頁面,此時采用無限滾動的交互方式,可以實現網站權重與用戶體驗雙提升的效果。一個優化得當的無限滾動列表頁甚至可以和競品首頁一較高下。

                                  滾動比點擊擁有更好的用戶體驗:

                                  鼠標滾動或滑動屏幕比點擊來的更快和更容易,特別是遇到連續和冗長的內容時,滾動顯然比點擊翻頁鏈接具有更好的可用性。

                                  滾動很適合移動設備:

                                  屏幕越小,滾動的時間越長。移動瀏覽的普及是采用滾動方式的另一個重要原因。移動設備的手勢控制使滾動更加直觀和易用。

                                  無限滾動頁面的常見問題與優化方法

                                  做SEO就是一個從發現問題到解決問題的過程,任何對搜索引擎及用戶體驗不友好的技術都有優化的空間,無限滾動頁面也是一個道理,被大家噴的越多,說明可優化的空間就越大,我們只需要發現問題并將它解決掉就可以了。

                                  問題1:導航混亂

                                  導航是瀏覽網站的關鍵部分,也是用戶體驗的重要部分。無限滾動破壞了通常的導航流。

                                  優化方法:使用吸頂導航保持導航的可見性

                                  使用無限滾動時候,最好保持導航條持續可見,這樣可以很快導航到頁面或應用的不同區域,對用戶來說也更簡單。如果找不到導航條,用戶將不得不一路向上將頁面滾回去。吸頂導航是一個不錯的解決方法。用戶滾動獲取新內容的時候,導航條可以隱藏起來;當用戶開始往回滾動試圖回到頂部的時候再顯示出來。

                                  問題2:頁腳被掩蓋了

                                  在一個無限滾動的網站中很難發現頁腳,但是用戶有時候需要訪問頁腳。

                                  優化方法:使用加載更多按鈕

                                  如果你的網站或應用有頁腳,且它對用戶很重要,那就應該用“加載更多”的方法。新內容不會自動加載,直到用戶點擊了“加載更多”的按鈕。這構成了一個很簡單的交互界面,也使得按需加載額外內容的認知負荷最小化。

                                  問題3:滾動位置被遺忘

                                  當用戶點擊無限滾動頁面中的鏈接跳轉的其他頁面,并嘗試點擊返回按鈕時,由于滾動條被重置,會導致無法回到之前瀏覽的滾動位置,這會產生很大挫敗感。

                                  優化方法:使用js記錄滾動位置

                                  頁面有跳轉的地址,不是直接鏈接過去。而是要帶著當前位置滾動過的距離進行跳轉。核心代碼段如下所示:

                                  青島網站建設

                                  $(‘[data-link]‘).on(‘click‘,function(event) { //阻止默認跳轉行為,阻止冒泡

                                  event.preventDefault();

                                  event.stopPropagation();

                                  savePage();

                                  window.location.href=$(this).attr(‘data-link‘);

                                  });

                                  function savePage(){  //操作瀏覽器的歷史記錄

                                  history.replaceState(‘‘, document.title, location.href.replace(location.hash, ““) + “#nowTop=“ + $(window).scrollTop());

                                  }

                                  //跳轉后的判斷

                                  if ($(‘wrap).height() > nowTop) {

                                  scrollTo(0, nowTop);

                                  }

                                  問題4:頁面性能下降

                                  隨著無限滾動,您將把越來越多的內容加載到內存中。這直接影響了網頁性能,因為瀏覽器要比通常打開頁面做更多的工作,客戶端需要不斷監聽與滾動相關的調用。

                                  優化方法:使用懶加載或預加載的方式優化性能

                                  懶加載:是一種按需延遲資源的方式。在加載顯示頁面時,并不一次性加載所有該頁面所需要的圖像,對于在可視區域之外的圖像,可以等到用戶滾動到該區域的時候,再進行加載。

                                  預加載:提前告訴瀏覽器將會用到的資源(例如圖片),提前加載緩存起來。需要的時候,直接從緩存中獲得圖片等資源http請求并沒有減少,而是在頁面加載渲染的過程中,在網絡不繁忙的時機發出請求。

                                  錦上添花的用戶體驗優化策略

                                  加載新內容時提供視覺反饋

                                  當內容在加載的時候,用戶需要明確的指示,說明正在進行中。使用進度指示讓用戶知道,新內容正在加載,很快就會在頁面上顯示。因為加載新內容是一個很快的動作,你可以使用循環動畫來提供反饋,表明系統正在工作。

                                  緩解用戶無盡瀏覽的疲勞感

                                  當內容較多時,可以使用無限滾動與分頁系統相結合的模式進行優化。當用戶滾動兩到三屏時,適時插入分頁系統,緩解用戶無盡瀏覽的疲勞感,同時可以采用顯示剩余資源數的方法,來讓用戶評估到底還需多長時間才能瀏覽完整個頁面。

                                  無限滾動插件推薦

                                  JQUERY 無限滾動插件:Endless Scroll

                                  React 無限滾動插件:react-infinite-scroller

                                  vue 無限滾動插件:vue-infinite-scroll

                                  angular 無限滾動插件:ngInfiniteScroll

                                  預告:分頁是無限滾動的孿生兄弟,有關分頁的SEO優化策略將在后續內容中進行更新,敬請關注。

                                   
                                  新思維網絡2005年成立于青島,專注于青島網站建設、網站設計、網站制作,為國內企業提供高端網站定制服務。