圖片懶加載 -- 爬蟲

圖片懶加載

什麼是圖片懶加載?

　　圖片懶加載是一種網頁優化技術。圖片做爲一種網絡資源，在被請求時也與普通靜態資源同樣，將佔用網絡資源，而一次性將整個頁面的全部圖片加載完，將大大增長頁面的首屏加載時間。爲了解決這種問題，經過先後端配合，使圖片僅在瀏覽器當前視窗內出現時才加載該圖片，達到減小首屏圖片請求數的技術就被稱爲「圖片懶加載」。

網站通常如何實現圖片懶加載技術呢?

　　在網頁源碼中，在img標籤中首先會使用一個「僞屬性」（一般使用src2，original......）去存放真正的圖片連接而並不是是直接存放在src屬性中。當圖片出現到頁面的可視化區域中，會動態將僞屬性替換成src屬性，完成圖片的加載。

案例分析:

　　抓取站長素材http://sc.chinaz.com/中的圖片數據,經過細緻觀察頁面的結構後發現，網頁中圖片的連接是存儲在了src2這個僞屬性中

代碼以下

 

import requests
from lxml import etree

url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html'
headers = {
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36',
}
# 獲取頁面文本數據
response = requests.get(url=url, headers=headers)
response.encoding = 'utf-8'
page_text = response.text
# 解析頁面數據（獲取頁面中的圖片連接）
# 建立etree對象
tree = etree.HTML(page_text)
div_list = tree.xpath('//div[@id="container"]/div')
# 解析獲取圖片地址和圖片的名稱
for div in div_list:
    image_url = div.xpath('.//img/@src2')  # src2僞屬性
    image_name = div.xpath('.//img/@alt')
    print(image_url)  # 打印圖片連接
    print(image_name)  # 打印圖片名稱