一. 案例分析：抓取站長素材http://sc.chinaz.com/中的圖片數(shù)據(jù)

#!/usr/bin/env python # -*- coding:utf-8 -*- import requests from lxml import etreeif __name__ == "__main__":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',}#獲取頁面文本數(shù)據(jù)response = requests.get(url=url,headers=headers)response.encoding = 'utf-8'page_text = response.text#解析頁面數(shù)據(jù)（獲取頁面中的圖片鏈接）#創(chuàng)建etree對象tree = etree.HTML(page_text)div_list = tree.xpath('//div[@id="container"]/div')#解析獲取圖片地址和圖片的名稱for div in div_list:image_url = div.xpath('.//img/@src')image_name = div.xpath('.//img/@alt')print(image_url) #打印圖片鏈接print(image_name)#打印圖片名稱

• 運行結果觀察發(fā)現(xiàn)，我們可以獲取圖片的名稱，但是鏈接獲取的為空，檢查后發(fā)現(xiàn)xpath表達式也沒有問題，究其原因出在了哪里呢？

• 圖片懶加載概念：

  • 圖片懶加載是一種網(wǎng)頁優(yōu)化技術。圖片作為一種網(wǎng)絡資源，在被請求時也與普通靜態(tài)資源一樣，將占用網(wǎng)絡資源，而一次性將整個頁面的所有圖片加載完，將大大增加頁面的首屏加載時間。為了解決這種問題，通過前后端配合，使圖片僅在瀏覽器當前視窗內(nèi)出現(xiàn)時才加載該圖片，達到減少首屏圖片請求數(shù)的技術就被稱為“圖片懶加載”。
  • 網(wǎng)站一般如何實現(xiàn)圖片懶加載技術呢？
  • 在網(wǎng)頁源碼中，在img標簽中首先會使用一個“偽屬性”（通常使用src2，original…）去存放真正的圖片鏈接而并非是直接存放在src屬性中。當圖片出現(xiàn)到頁面的可視化區(qū)域中，會動態(tài)將偽屬性替換成src屬性，完成圖片的加載。

• 站長素材案例后續(xù)分析：通過細致觀察頁面的結構后發(fā)現(xiàn)，網(wǎng)頁中圖片的鏈接是存儲在了src2這個偽屬性中

''' 遇到問題沒人解答？小編創(chuàng)建了一個Python學習交流QQ群：857662006 尋找有志同道合的小伙伴，互幫互助,群里還有不錯的視頻學習教程和PDF電子書！ '''#!/usr/bin/env python# -*- coding:utf-8 -*-import requestsfrom lxml import etreeif __name__ == "__main__":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',}#獲取頁面文本數(shù)據(jù)response = requests.get(url=url,headers=headers)response.encoding = 'utf-8'page_text = response.text#解析頁面數(shù)據(jù)（獲取頁面中的圖片鏈接）#創(chuàng)建etree對象tree = etree.HTML(page_text)div_list = tree.xpath('//div[@id="container"]/div')#解析獲取圖片地址和圖片的名稱for div in div_list:image_url = div.xpath('.//img/@src'2) #src2偽屬性image_name = div.xpath('.//img/@alt')print(image_url) #打印圖片鏈接print(image_name)#打印圖片名稱

二. 利用selenuim 模擬瀏覽器滑動到底部, 加載數(shù)據(jù).

class ProductSpider(scrapy.Spider):
name = “Product1688”
start_urls = []

''' 遇到問題沒人解答？小編創(chuàng)建了一個Python學習交流QQ群：857662006 尋找有志同道合的小伙伴，互幫互助,群里還有不錯的視頻學習教程和PDF電子書！ ''' def __init__(self, **kwargs):# 加載 chrome driver, 它的下載地址位于 https://sites.google.com/a/chromium.org/chromedriver/super().__init__(**kwargs)self.driver = webdriver.Chrome('/path/to/your/chromedriver')self.wait = WebDriverWait(self.driver, 10)def parse(self, response):self.driver.get(response.url)# 打開頁面后，滑動至頁面底部self.scroll_until_loaded()# 以 xpath 尋找商品名（標題 )title = self.driver.find_element_by_xpath('//*[@id="mod-detail-title"]/h1')# 以 xpath 尋找商品主圖片main_images_elements = self.driver.find_elements_by_xpath('//*[@id="dt-tab"]/div/ul/li/div/a/img')# 以 xpath 尋找商品詳情圖片detail_images_elements = \self.driver.find_elements_by_xpath('//*[@id="desc-lazyload-container"]/p/span/strong/img')item = ProductItem()main_images = []detail_images = []# 獲取商品主圖的網(wǎng)絡地址，針對商品主圖片尺寸的特殊處理for image in main_images_elements:main_images.append(image.get_attribute('src').replace('60x60.', ''))# 獲取商品詳情圖片的網(wǎng)絡地址for image in detail_images_elements:detail_images.append(image.get_attribute('src'))item['title'] = title.textitem['main_image_count'] = len(main_images)item['image_urls'] = main_images + detail_imagesreturn item# 模擬瀏覽器頁面滾到頁面底部的行為 def scroll_until_loaded(self):check_height = self.driver.execute_script("return document.body.scrollHeight;")while True:self.driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")try:self.wait.until(lambda driver: self.driver.execute_script("return document.body.scrollHeight;") > check_height)check_height = self.driver.execute_script("return document.body.scrollHeight;")except TimeoutException:break

總結

以上是生活随笔為你收集整理的Python：图片懒加载技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。