爬取图片懒加载页面

在带大家爬取图片懒加载页面之前, 先为大家介绍一下什么是图片懒加载, 懒加载有什么用, 在理解原理后再去爬取, 相信就会简单多了。

1.什么是懒加载

在一些网站或者app上会看到 鼠标或手势过快，而图片没有加载出来由色块或其他图片代替的情况，当图片出现在我们看到的视图中，再迅速将占位图片换成我们真正想展示的图片，这里使用了一种技术，图片懒加载

2.为什么要使用懒加载

当你打开一个网站时，浏览器会做许多工作，这其中包括下载各种可能用到的资源，然后渲染呈现在你面前，假设你的网站有大量的图片，那么加载的过程是很耗时的，尤其像那些新闻资讯类需要大量图片的网站，可想而知，网站的初始加载时间会很长，再加上网络等其它影响，用户体验会很差。我们都希望一输入网址，页面立马就呈现在眼前。
既然想要页面立马呈现在面前，那势必要减少浏览器的负荷，优化代码，减少一些不必要的请求和不必要资源的加载，因为你打开网站的时候，浏览器会把所有可能的资源都下载好，而实际上有些资源你并不需要用到，这就造成了浪费。所以有必要在一些资源上做下优化，提高网站加载速度。

那么介绍完了， 就该进入正题了, 我们应该如何爬取带有图片懒加载功能的页面。

3.如何爬取图片懒加载的网站

今天带大家爬取图片懒加载的网站是站长素材中的高清图片
点击这里进入站长素材

3.1 分析爬虫页面, 指定爬取流程

1. url很容易确认, 当前的网址就是爬取的url

2. 分析爬虫页面

   进入页面后, 我们可以打开控制台(F12), 并选中图片, 可以看到每一张图片就是一个div, 如下图

   
   我们点击div, 逐层点开, 可以看到内层的img标签就是存放图片链接的
   
   这时, 我们不要往下滑动, 将这个div收起来, 可以看到有多个div, 往下面滚动, 点击倒数的任意一个div, 然后再逐层点开, 我们会发现和第一个div看到的有所不同
   
   此处的img中的src属性变成了src2, 这就是图片懒加载技术, 当图片没有正常渲染到页面之前, 所有的src都被替换成了src2, 只有当图片渲染到页面上, src2才会变成真正的src, 当然, 每个网站使用替换src的名称都不同, 可能别的网站是src100、src5…

   不过无论替换的名称是什么, 只要掌握了原理, 我们就可以正常爬取

3. 对分析后的页面进行爬取并解析数据

4. 将解析后的数据持久化

3.2 编写爬虫的代码

import requests
import time
from lxml import etree  # xpath解析


# 定义站长素材图片的存储路径, 文件夹需要先创建好
IMAGE_PATH = 'zhan_zhang/'


def spider_image(page):
    if page == 1:
        url = 'http://sc.chinaz.com/tupian/'
    else:
        url = 'http://sc.chinaz.com/tupian/index_%s.html' % page
    # 定制请求头信息
    headers = {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)"
                      "Chrome/74.0.3729.108 Safari/537.36",
    }
    
    # 对页面发起请求
    response = requests.get(url=url, headers=headers)
    # 需要对响应的页面进行编码, 否则拿到的会是乱码的数据
    response.encoding = 'utf-8'

    # 解析数据,获取图片的img标签
    tree = etree.HTML(response.text)
    img_list = tree.xpath('//div[@id="container"]/div/div/a/img')
    
    # 循环遍历所有img标签
    for img in img_list:
    	# 拿取图片标题
        title = img.xpath('./@alt')[0]
        
        """
        此处拿的src是懒加载时的图片路径,当使用get请求页面拿取到的时页面的源码,此时
        还没有动态加载页面,所以src还是懒加载的,只需要拿取懒加载的src2即可
        """
        src = img.xpath('./@src2')[0]
        
        # 访问图片页面
        res = requests.get(url=src, headers=headers)
        # 图片必须以二进制流来写入
        with open(IMAGE_PATH + '%s.jpg' % title, 'wb') as f:
            f.write(res.content)


if __name__ == '__main__':
    # 循环爬取指定页码的图片
    start_time = time.time()
    for i in range(1, 3):
        spider_image(i)
        time.sleep(2)
    end_time = time.time()
    print("总耗时:%s" % (end_time - start_time))

4.总结

这就是爬取图片懒加载页面的基本过程了, 现在很多网站为了使用户体验更加完美, 都会采用图片懒加载的技术, 不过大家只要在爬取前对页面进行详情的分析, 制定好相关的爬取流程, 相信爬取这些网站还是不成问题的。