【網頁圖片懶載入】
阿新 • • 發佈:2019-01-13
圖片懶載入概念
圖片懶載入是一種網頁優化技術。圖片作為一種網路資源,在被請求時也與普通靜態資源一樣,將佔用網路資源,而一次性將整個頁面的所有圖片載入完,將會大大增加頁面的首屏載入時間。為了解決這個問題,通過前後端配合,使圖片僅在瀏覽器當前視窗內出現時才載入該圖片,達到減少首屏請求數的技術就被成為“圖片懶載入”。
網站一般如何實現圖片懶載入技術呢?
在網頁原始碼中,在img標籤中首先會使用一個“偽屬性”(通常使用src2,original…)來存放真正的圖片連結,而並非存放在src屬性中。當圖片出現到頁面的視覺化區域中時,會動態將偽屬性替換成src屬性,完成圖片的載入。
例項:Python爬蟲抓取站長素材網中的圖片
import os
import requests
from lxml import etree
import urllib.request
from fake_useragent import UserAgent as ua
from concurrent.futures import ThreadPoolExecutor
# 站長素材網
url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html'
headers = {
'User-Agent': ua(use_cache_server= False).random
}
# 獲取頁面文字資料
response = requests.get(url, headers=headers)
response.encoding = 'utf-8'
page_text = response.text
# 獲取所有存放圖片的div
tree = etree.HTML(page_text)
div_list = tree.xpath('//div[@id="container"]/div')
# 開始獲取圖片資訊
img_info = {}
for div in div_list:
img_name = div.xpath('.//img/@alt' )[0]
img_url = div.xpath('.//img/@src2')[0]
# 因為 圖片懶載入技術 的存在, 所以這裡一定要寫成 src2。否則你獲取不到圖片url
# .// 表示從當前的標籤開始查詢
print(img_url, img_name)
img_info.setdefault(img_name, img_url)
# 我就儲存圖片
dirname = '古裝美女'
os.mkdir(dirname)
t = ThreadPoolExecutor((os.cpu_count() or 1) * 5)
for name, url in img_info.items():
file_path = os.path.join(dirname, f'{name}.jpg')
t.submit(lambda: urllib.request.urlretrieve(url, file_path))