圖片懶載入

什麼是圖片懶載入?

　　圖片懶載入是一種網頁優化技術。圖片作為一種網路資源，在被請求時也與普通靜態資源一樣，將佔用網路資源，而一次性將整個頁面的所有圖片載入完，將大大增加頁面的首屏載入時間。為了解決這種問題，通過前後端配合，使圖片僅在瀏覽器當前視窗內出現時才載入該圖片，達到減少首屏圖片請求數的技術就被稱為“圖片懶載入”。

網站一般如何實現圖片懶載入技術呢?

　　在網頁原始碼中，在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)  # 列印圖片名稱