1. 程式人生 > >【網頁圖片懶載入】

【網頁圖片懶載入】

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

網站一般如何實現圖片懶載入技術呢?
       在網頁原始碼中,在img標籤中首先會使用一個“偽屬性”(通常使用src2,original…)來存放真正的圖片連結,而並非存放在src屬性中。當圖片出現到頁面的視覺化區域中時,會動態將偽屬性替換成src屬性,完成圖片的載入。

例項:Python爬蟲抓取站長素材網中的圖片
偽屬性

import os
import requests
from lxml import etree
import urllib.request
from fake_useragent import UserAgent as ua
from concurrent.futures import ThreadPoolExecutor

# 站長素材網
url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html'

headers = {
    'User-Agent': ua(use_cache_server=
False).random } # 獲取頁面文字資料 response = requests.get(url, headers=headers) response.encoding = 'utf-8' page_text = response.text # 獲取所有存放圖片的div tree = etree.HTML(page_text) div_list = tree.xpath('//div[@id="container"]/div') # 開始獲取圖片資訊 img_info = {} for div in div_list: img_name = div.xpath('.//img/@alt'
)[0] img_url = div.xpath('.//img/@src2')[0] # 因為 圖片懶載入技術 的存在, 所以這裡一定要寫成 src2。否則你獲取不到圖片url # .// 表示從當前的標籤開始查詢 print(img_url, img_name) img_info.setdefault(img_name, img_url) # 我就儲存圖片 dirname = '古裝美女' os.mkdir(dirname) t = ThreadPoolExecutor((os.cpu_count() or 1) * 5) for name, url in img_info.items(): file_path = os.path.join(dirname, f'{name}.jpg') t.submit(lambda: urllib.request.urlretrieve(url, file_path))