整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
兩天被django折磨的快崩潰了。要做一個網(wǎng)頁，結(jié)果CSS 和圖片總是加載不出來。官方文檔中教了一部分，上網(wǎng)看樂各種教程都不行，研究了好幾個小時，東拼西湊各個地方學一點，終于弄出來了，趕緊記錄下來。
django用的靜態(tài)文件路徑：STATICFILES_DIRS部署的方式，文件路徑一定要設置好。
注： python2.7 django1.10.6； 項目mysite，項目下有一個應用myapp
一、目錄結(jié)構(gòu)：
整個目錄結(jié)構(gòu)是這樣的：
| mysite
| —— manage.py
| —— mysite
| —— | —— settings
| —— | ——…（urls等）
| —— templates
| —— myapp
| —— …(views等)
| —— | —— templates
| —— | —— | —— myapp
| —— | —— | —— | —— home.html
| —— | —— | —— | —— static
| —— | —— | —— | —— | —— css
| —— | —— | —— | —— | —— images
注意，文件夾結(jié)構(gòu)比較復雜。
在項目文件夾下有一個templates文件夾，不過這個文件夾暫時沒什么用，可以不用管（我也不知道為什么要有這么個文件夾）。
應用文件夾結(jié)構(gòu)是這樣的：
“myapp/templates/myapp/home.html”；
“myapp/templates/myapp/static/images”；
“myapp/templates/myapp/static/CSS”；
二、設置templates和靜態(tài)路徑
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'myapp/templates').replace('\', '/'),
os.path.join(BASE_DIR, 'templates').replace('\', '/')],
}
]
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的最后加上以下內(nèi)容：
#設置靜態(tài)文件路徑
urlpatterns += staticfiles_urlpatterns()
四、修改html文件
home.html文件相關(guān)內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" />
<title>Home</title>
</head>
<body>
<a href="https://www.baidu.com/>
<img src="/static/images/logo.png" alt="logo"/>
</a>
</body>
</html>
改成自己的圖片名稱，注意圖片和link的前綴：/static/images/ 別寫成 static/images/ ，這樣會無法顯示。
感覺自己底子真的太差，這幾天一點一點看官方文檔感到非常吃力，很多地方都不懂，想直接看自己需要的部分又不知道該看哪。
頁中預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速加載，特別是一些大型的電商網(wǎng)站就常用！幫助用戶在瀏覽你網(wǎng)站內(nèi)容時獲得更好的用戶體驗，下面就來說說實現(xiàn)圖片預加載的方法。
一、使用JavaScript實現(xiàn)預加載
提供兩種這樣的預加載方法，它們可以很漂亮地工作于所有現(xiàn)代瀏覽器之上。
只需簡單編輯、加載所需要圖片的路徑與名稱即可，很容易實現(xiàn)：
該方法尤其適用預加載大量的圖片。畫廊網(wǎng)站使用該技術(shù)，預加載圖片數(shù)量達50多張的時候。將該腳本應用到登錄頁面，只要用戶輸入登錄帳號，大部分畫廊圖片將被預加載。
另外一種方法與上面的方法類似，也可以預加載任意數(shù)量的圖片。將下面的腳本添加入任何Web頁中，根據(jù)程序指令進行編輯即可。
每加載一個圖片都需要創(chuàng)建一個變量，如“img1 = new Image();”，及圖片源地址聲明，如“img3.src = "../path/to/image-003.gif";”。參考該模式，你可根據(jù)需要加載任意多的圖片。
二、用CSS實現(xiàn)預加載
單純使用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頁面的其他地方被調(diào)用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。
擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
在H5的頁面中，我們經(jīng)常會看到開頭有一個loading的效果，這個loading的時間內(nèi)就是在加載圖片資源，以便后續(xù)滑屏效果更流暢。那么JS如何來判斷圖片資源已加載完成呢？且如何能更優(yōu)雅的寫斷定代碼。
首先，提一下兩個事件：jquery中有一個ready和window.onload的區(qū)別。ready只是dom結(jié)構(gòu)加載完成，圖片并沒有加載完畢，而onload是dom生成和資源完全加載出來后才執(zhí)行，這里也就包括圖片已加載。
所以，基本這點，接下來我們來看一下JS是如何斷定單圖和多圖加載完成的。
IE8下版本不支持onload事件，但支持onreadystatechange事件，readyState是onreadystatechange事件的一個狀態(tài)，值為loaded或complete的時候，表示已經(jīng)加載完畢。代碼如下所示：
在不考慮兼容的情況下，使用onload事件就足夠了，下面分單圖和多圖及結(jié)合promise來給出代碼。
1. 單圖（onload）
2. 單圖（+promise）
3. 多圖（onload）
4. 多圖（+promise）
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
