python爬蟲--圖片懶加載

圖片懶加載

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

如何實現圖片懶加載技術

	在網頁源碼中，在img標簽中首先會使用一個“偽屬性”（通常使用src2，original…）去存放真正的圖片鏈接而並非是直接存放在src屬性中。當圖片出現到頁面的可視化區域中，會動態將偽屬性替換成src屬性，完成圖片的加載。

案例

爬取站長之家的圖片素材

import scrapy
import requests
headers={
'USER_AGENT':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36'
}

class ImgzzSpider(scrapy.Spider):
    name = 'imgzz'

    start_urls = ['http://sc.chinaz.com/tupian/']

    def parse(self, response):
        src = response.xpath('//*[@id="container"]/div/div[1]/a/img/@src').extract()
	    print(src) # 打印結果為空,這里的圖片屬性就應用的圖片懶加載技術,其實圖片的真正的src不是圖片真正的屬性
        for url in src:
            name = url.split('/')[-1]
            img = requests.get(url=url,headers=headers).content
            with open(name,'wb') as f:
                f.write(img)

分析:

正常訪問時:

這樣直接寫xpath表達式定位標簽的話獲取的值為空

當圖片出現到頁面的可視化區域中，會動態將偽屬性替換成src屬性，完成圖片的加載。通過js來完成對圖片屬性的替換

import scrapy
import requests
headers={
'USER_AGENT':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36'
}

class ImgzzSpider(scrapy.Spider):
    name = 'imgzz'

    start_urls = ['http://sc.chinaz.com/tupian/']

    def parse(self, response):
        src = response.xpath('//*[@id="container"]/div/div[1]/a/img/@src2').extract() #改為圖片的真正屬性
	    print(src) 
        for url in src:
            name = url.split('/')[-1]
            img = requests.get(url=url,headers=headers).content
            with open(name,'wb') as f:
                f.write(img)