圖片懶加載技術

目錄

• 圖片懶加載技術
  • 一. 案例分析：抓取站長素材http://sc.chinaz.com/中的圖片數據

圖片懶加載技術

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

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import requests
from lxml import etree

if __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',
     }
     #獲取頁面文本數據
     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/@src')
         image_name = div.xpath('.//img/@alt')
         print(image_url) #打印圖片連接
         print(image_name)#打印圖片名稱

• 運行結果觀察發現，咱們能夠獲取圖片的名稱，可是連接獲取的爲空，檢查後發現xpath表達式也沒有問題，究其緣由出在了哪裏呢？

• 圖片懶加載概念：

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

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

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

• 站長素材案例後續分析：經過細緻觀察頁面的結構後發現，網頁中圖片的連接是存儲在了src2這個僞屬性中

  #!/usr/bin/env python
    # -*- coding:utf-8 -*-
    import requests
    from lxml import etree
  
    if __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',
         }
         #獲取頁面文本數據
         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/@src'2) #src2僞屬性
             image_name = div.xpath('.//img/@alt')
             print(image_url) #打印圖片連接
             print(image_name)#打印圖片名稱

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

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

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 = []
    # 獲取商品主圖的網絡地址，針對商品主圖片尺寸的特殊處理
    for image in main_images_elements:
        main_images.append(image.get_attribute('src').replace('60x60.', ''))
    # 獲取商品詳情圖片的網絡地址
    for image in detail_images_elements:
        detail_images.append(image.get_attribute('src'))

    item['title'] = title.text
    item['main_image_count'] = len(main_images)
    item['image_urls'] = main_images + detail_images

    return 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