django加載css文件和圖片

兩天被django折磨的快崩潰了。要做一個網頁，結果CSS 和圖片總是加載不出來。官方文檔中教了一部分，上網看樂各種教程都不行，研究了好幾個小時，東拼西湊各個地方學一點，終于弄出來了，趕緊記錄下來。

django用的靜態文件路徑：STATICFILES_DIRS部署的方式，文件路徑一定要設置好。

注： python2.7 django1.10.6；項目mysite，項目下有一個應用myapp

一、目錄結構：

整個目錄結構是這樣的：

| mysite
| —— manage.py
| —— mysite
| —— | —— settings
| —— | ——…（urls等）
| —— templates
| —— myapp
| —— …(views等)
| —— | —— templates
| —— | —— | —— myapp
| —— | —— | —— | —— home.html
| —— | —— | —— | —— static
| —— | —— | —— | —— | —— css
| —— | —— | —— | —— | —— images

注意，文件夾結構比較復雜。

在項目文件夾下有一個templates文件夾，不過這個文件夾暫時沒什么用，可以不用管（我也不知道為什么要有這么個文件夾）。

應用文件夾結構是這樣的：

“myapp/templates/myapp/home.html”；
“myapp/templates/myapp/static/images”；
“myapp/templates/myapp/static/CSS”；

二、設置templates和靜態路徑

在settings.py中設置templates路徑

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [os.path.join(BASE_DIR, 'myapp/templates').replace('\', '/'),

os.path.join(BASE_DIR, 'templates').replace('\', '/')],

}

]

1
2
3
4
5
6
7
在settings.py文件的最后加上以下內容：

STATIC_ROOT = os.path.join(BASE_DIR, 'myapp/templates/myapp/static').replace('\', '/')

STATICFILES_DIRS = (

('css', os.path.join(STATIC_ROOT, 'css').replace('\', '/')),

('images', os.path.join(STATIC_ROOT, 'images').replace('\', '/')),

)

三、修改urls.py文件

在urls.py開頭加上一句：

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

在urls.py的最后加上以下內容：

#設置靜態文件路徑

urlpatterns += staticfiles_urlpatterns()

四、修改html文件

home.html文件相關內容如下：

<!DOCTYPE html>

<head>

</head>

<body>

</a>

</body>

</html>

改成自己的圖片名稱，注意圖片和link的前綴：/static/images/ 別寫成 static/images/ ，這樣會無法顯示。

感覺自己底子真的太差，這幾天一點一點看官方文檔感到非常吃力，很多地方都不懂，想直接看自己需要的部分又不知道該看哪。

頁中預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，并享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速加載，特別是一些大型的電商網站就常用！幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗，下面就來說說實現圖片預加載的方法。

一、使用JavaScript實現預加載

提供兩種這樣的預加載方法，它們可以很漂亮地工作于所有現代瀏覽器之上。

只需簡單編輯、加載所需要圖片的路徑與名稱即可，很容易實現：

該方法尤其適用預加載大量的圖片。畫廊網站使用該技術，預加載圖片數量達50多張的時候。將該腳本應用到登錄頁面，只要用戶輸入登錄帳號，大部分畫廊圖片將被預加載。

另外一種方法與上面的方法類似，也可以預加載任意數量的圖片。將下面的腳本添加入任何Web頁中，根據程序指令進行編輯即可。

每加載一個圖片都需要創建一個變量，如“img1 = new Image();”，及圖片源地址聲明，如“img3.src = "../path/to/image-003.gif";”。參考該模式，你可根據需要加載任意多的圖片。

二、用CSS實現預加載

單純使用CSS，可容易、高效地預加載圖片，代碼如下：

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(-03.png) no-repeat -9999px -9999px; }

將這三個ID選擇器應用到HTML元素中，我們便可通過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。

擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

在H5的頁面中，我們經常會看到開頭有一個loading的效果，這個loading的時間內就是在加載圖片資源，以便后續滑屏效果更流暢。那么JS如何來判斷圖片資源已加載完成呢？且如何能更優雅的寫斷定代碼。

首先，提一下兩個事件：jquery中有一個ready和window.onload的區別。ready只是dom結構加載完成，圖片并沒有加載完畢，而onload是dom生成和資源完全加載出來后才執行，這里也就包括圖片已加載。

所以，基本這點，接下來我們來看一下JS是如何斷定單圖和多圖加載完成的。

考慮兼容

IE8下版本不支持onload事件，但支持onreadystatechange事件，readyState是onreadystatechange事件的一個狀態，值為loaded或complete的時候，表示已經加載完畢。代碼如下所示：

不考慮兼容

在不考慮兼容的情況下，使用onload事件就足夠了，下面分單圖和多圖及結合promise來給出代碼。

1. 單圖（onload）

2. 單圖（+promise）

3. 多圖（onload）

4. 多圖（+promise）

在線咨詢

上一篇：JavaFX 11發行說明
下一篇：Google Chrome 工程師：JavaScript 不容錯過的八大優化建議

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

django加載css文件和圖片

考慮兼容

不考慮兼容

您的項目需求