目录

图片懒加载技术

一. 案例分析：抓取站长素材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表达式也没有问题，究其原因出在了哪里呢？

    SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

  • 图片懒加载概念：

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

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

    • 在网页源码中，在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)#打印图片名称
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄