图片懒加载、selenium&phantomjs

一.什么是图片懒加载？
　　- 案例分析：抓取站长素材http://sc.chinaz.com/中的图片数据

运行结果观察发现，我们可以获取图片的名称，但是链接获取的为空，检查后发现xpath表达式也没有问题，究其原因出在了哪里呢？

　　- 图片懒加载概念：

　　　　图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

　　- 网站一般如何实现图片懒加载技术呢？

　　　　在网页源码中，在img标签中首先会使用一个“伪属性”（通常使用src2，original......）去存放真正的图片链接而并非是直接存放在src属性中。当图片出现到页面的可视化区域中，会动态将伪属性替换成src属性，完成图片的加载。

　　- 站长素材案例后续分析：通过细致观察页面的结构后发现，网页中图片的链接是存储在了src2这个伪属性中

import requests
from lxml import etree
import urllib.request
import os
import json
headers = {
    
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36'
}
if not os.path.exists('meinv'):
    os.mkdir('meinv')
    
def savaImage(image_url):
    fileName = image_url.split('/')[-1]
    filePath = 'meinv/'+fileName
    #网络图片进行下载且存储
    urllib.request.urlretrieve(url=image_url,filename=filePath)
    
url = 'http://sc.chinaz.com/tupian/siwameinvtupian.html'

page_content = requests.get(url,headers=headers).text

#解析
tree = etree.HTML(page_content)
div_list = tree.xpath('//div[@id="container"]/div')
all_data = []
for div in div_list:
    image_url = div.xpath('.//img/@src2')[0]
    title = div.xpath('.//img/@alt')
    savaImage(image_url)#根据指定url下载图片
    data = {
        'title':title,
        'image_url':image_url
    }
    
    all_data.append(data)
    
fp = open('./data.json','w',encoding='utf-8')
json.dump(all_data,fp,ensure_ascii=False)    
fp.close()

View Code

二.selenium

　　- 什么是selenium？

　　　　是Python的一个第三方库，对外提供的接口可以操作浏览器，然后让浏览器完成自动化的操作。　　

　　- 环境搭建

　　　　1.安装selenum：pip install selenium

　　　　2.获取某一款浏览器的驱动程序（以谷歌浏览器为例）　

　　　　　　2.1 谷歌浏览器驱动下载地址：http://chromedriver.storage.googleapis.com/index.html

　　　　　　2.2 下载的驱动程序必须和浏览器的版本统一，大家可以根据http://blog.csdn.net/huilan_same/article/details/51896672中提供的版本映射表进行对应

　　- 效果展示：大家可以将如下代码运行，观看效果

图片懒加载、selenium&phantomjs

猜你喜欢