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