如要參考 python3.8
以及 django 3.12.4
, 請到 django3 分支.
結合 Django + jQuery 實現無限卷軸 Infinite Scroll 📝
本專案是透過 Deploying_Django_To_Heroku_Tutorial 修改完成,
詳細的佈署 heroku 方式以及細節在這篇就不再說明 😄
這次主要是加上 無限卷軸 Infinite Scroll 以及後端的一些小修改。
建議對 Django 不熟悉的朋友,可以先觀看我之前寫的文章( 進入 Django 的世界)
-
使用 lazyload 載入大量圖片。
-
圖片來源為爬蟲,可參考 auto_crawler_ptt_beauty_image 。
確定電腦有安裝 Python 之後
請在 cmd ( 命令提示字元 ) 輸入以下指令
pip install -r requirements.txt
首頁
滑鼠游標移到圖片上,可刪除圖片
載入圖片時,左上角會有 Loading 圖示,代表載入資料中
接下來要來比較,一次全部載入 vs. 一次只載入 10 張圖片 的使用者體驗
一次載入一萬筆圖片 ( lazyload ) -> ptt-beauty-images
一次載入10張圖片 ( lazyload + infinite-scroll ) -> ptt-beauty-infinite-scroll
相信大家可以很明顯的發現 一次只載入 10 張圖片 的開啟網頁速度快很多,
這概念和之前介紹的 DRF-dataTable-Example-server-side 類似,一般來說,
不太需要一次把全部的資料都顯示出來,而且使用者也不太可能需要次看那
麼多的資訊,所以以這個專案 ( 圖片 ) 為例,我們使用 infinite-scroll 一次載
入 10 張圖片,使用者慢慢看,就很適合,使用體驗也高了不少 😁
- Python 3.6.2
文章都是我自己研究內化後原創,如果有幫助到您,也想鼓勵我的話,歡迎請我喝一杯咖啡:laughing:
MIT license