爬虫之图片懒加载技术、selenium和PhantomJS

  • 图片懒加载
  • selenium
  • phantomJs
  • 谷歌无头浏览器

一.图片懒加载

  • 什么是图片懒加载?

    • 案例分析:抓取站长素材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)#打印图片名称

二.selenium

  • 什么是selenium?

    • 是Python的一个第三方库,对外提供的接口可以操作浏览器,然后让浏览器完成自动化的操作。  
  • 环境搭建
    • 安装selenum:pip install selenium
    • 获取某一款浏览器的驱动程序(以谷歌浏览器为例)
      • 谷歌浏览器驱动下载地址:http://chromedriver.storage.googleapis.com/index.html
      • 下载的驱动程序必须和浏览器的版本统一,大家可以根据http://blog.csdn.net/huilan_same/article/details/51896672中提供的版本映射表进行对应

效果展示:

from selenium import webdriver
from time import sleep

# 后面是你的浏览器驱动位置,记得前面加r‘‘,‘r‘是防止字符转义的
driver = webdriver.Chrome(r‘驱动程序路径‘)
# 用get打开百度页面
driver.get("http://www.baidu.com")
# 查找页面的“设置”选项,并进行点击
driver.find_elements_by_link_text(‘设置‘)[0].click()
sleep(2)
# # 打开设置后找到“搜索设置”选项,设置为每页显示50条
driver.find_elements_by_link_text(‘搜索设置‘)[0].click()
sleep(2)

# 选中每页显示50条
m = driver.find_element_by_id(‘nr‘)
sleep(2)
m.find_element_by_xpath(‘//*[@id="nr"]/option[3]‘).click()
m.find_element_by_xpath(‘.//option[3]‘).click()
sleep(2)

# 点击保存设置
driver.find_elements_by_class_name("prefpanelgo")[0].click()
sleep(2)

# 处理弹出的警告页面   确定accept() 和 取消dismiss()
driver.switch_to_alert().accept()
sleep(2)
# 找到百度的输入框,并输入 美女
driver.find_element_by_id(‘kw‘).send_keys(‘美女‘)
sleep(2)
# 点击搜索按钮
driver.find_element_by_id(‘su‘).click()
sleep(2)
# 在打开的页面中找到“Selenium - 开源中国社区”,并打开这个页面
driver.find_elements_by_link_text(‘美女_百度图片‘)[0].click()
sleep(3)

# 关闭浏览器
driver.quit()

代码介绍:

#导包
from selenium import webdriver
#创建浏览器对象,通过该对象可以操作浏览器
browser = webdriver.Chrome(‘驱动路径‘)
#使用浏览器发起指定请求
browser.get(url)

#使用下面的方法,查找指定的元素进行操作即可
    find_element_by_id            根据id找节点
    find_elements_by_name         根据name找
    find_elements_by_xpath        根据xpath查找
    find_elements_by_tag_name     根据标签名找
    find_elements_by_class_name   根据class名字查找

三.phantomJs

  • PhantomJS是一款无界面的浏览器,其自动化操作流程和上述操作谷歌浏览器是一致的。由于是无界面的,为了能够展示自动化操作流程,PhantomJS为用户提供了一个截屏的功能,使用save_screenshot函数实现。
  • 代码演示:

    from selenium import webdriver
    import time
    
    # phantomjs路径
    path = r‘PhantomJS驱动路径‘
    browser = webdriver.PhantomJS(path)
    
    # 打开百度
    url = ‘http://www.baidu.com/‘
    browser.get(url)
    
    time.sleep(3)
    
    browser.save_screenshot(r‘phantomjs\baidu.png‘)
    
    # 查找input输入框
    my_input = browser.find_element_by_id(‘kw‘)
    # 往框里面写文字
    my_input.send_keys(‘美女‘)
    time.sleep(3)
    #截屏
    browser.save_screenshot(r‘phantomjs\meinv.png‘)
    
    # 查找搜索按钮
    button = browser.find_elements_by_class_name(‘s_btn‘)[0]
    button.click()
    
    time.sleep(3)
    
    browser.save_screenshot(r‘phantomjs\show.png‘)
    
    time.sleep(3)
    
    browser.quit()

  • 重点:selenium+phantomjs 就是爬虫终极解决方案:有些网站上的内容信息是通过动态加载js形成的,所以使用普通爬虫程序无法回去动态加载的js内容。例如豆瓣电影中的电影信息是通过下拉操作动态加载更多的电影信息。

    • 综合操作:需求是尽可能多的爬取豆瓣网中的电影信息

      from selenium import webdriver
      from time import sleep
      import time
      
      if __name__ == ‘__main__‘:
          url = ‘https://movie.douban.com/typerank?type_name=%E6%81%90%E6%80%96&type=20&interval_id=100:90&action=‘
          # 发起请求前,可以让url表示的页面动态加载出更多的数据
          path = r‘C:\Users\Administrator\Desktop\爬虫授课\day05\ziliao\phantomjs-2.1.1-windows\bin\phantomjs.exe‘
          # 创建无界面的浏览器对象
          bro = webdriver.PhantomJS(path)
          # 发起url请求
          bro.get(url)
          time.sleep(3)
          # 截图
          bro.save_screenshot(‘1.png‘)
      
          # 执行js代码(让滚动条向下偏移n个像素(作用:动态加载了更多的电影信息))
          js = ‘window.scrollTo(0,document.body.scrollHeight)‘
          bro.execute_script(js)  # 该函数可以执行一组字符串形式的js代码
          time.sleep(2)
      
          bro.execute_script(js)  # 该函数可以执行一组字符串形式的js代码
          time.sleep(2)
          bro.save_screenshot(‘2.png‘)
          time.sleep(2)
          # 使用爬虫程序爬去当前url中的内容
          html_source = bro.page_source # 该属性可以获取当前浏览器的当前页的源码(html)
          with open(‘./source.html‘, ‘w‘, encoding=‘utf-8‘) as fp:
              fp.write(html_source)
          bro.quit()

四.谷歌无头浏览器

  • 由于PhantomJs最近已经停止了更新和维护,所以推荐大家可以使用谷歌的无头浏览器,是一款无界面的谷歌浏览器。
  • 代码展示:

    from selenium import webdriver
    from selenium.webdriver.chrome.options import Options
    import time
    
    # 创建一个参数对象,用来控制chrome以无界面模式打开
    chrome_options = Options()
    chrome_options.add_argument(‘--headless‘)
    chrome_options.add_argument(‘--disable-gpu‘)
    # 驱动路径
    path = r‘C:\Users\ZBLi\Desktop\1801\day05\ziliao\chromedriver.exe‘
    
    # 创建浏览器对象
    browser = webdriver.Chrome(executable_path=path, chrome_options=chrome_options)
    
    # 上网
    url = ‘http://www.baidu.com/‘
    browser.get(url)
    time.sleep(3)
    
    browser.save_screenshot(‘baidu.png‘)
    
    browser.quit()

原文地址:https://www.cnblogs.com/xiao-xue-di/p/10257080.html

时间: 01-11

爬虫之图片懒加载技术、selenium和PhantomJS的相关文章

前端性能优化技术(一):图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> </head> <body> <div> <a href="#"><img class="lazy" src="imag

图片懒加载

一.什么是图片滚动加载? 通俗的将就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有在图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来.这就是图片懒加载. 二.为什么要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了.更为要命的是:一上来就发送百八十个请求

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览

抛砖引玉:大型网站性能优化之Javascript异步懒加载技术

懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用到了懒加载技术,比如国内两个大型电商网站的页面都运用到了这项技术: 天猫首页: 京东商品列表页: 最近在学习时,自己写了一个带懒加载功能的电影列表展示页,大家可以先看下页面效果: http://f81236211.w4w7.tumm.top/lazyload/ 然后自己在页面底部写了一个分页功能,页

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

jQuery.imgLazyLoad图片懒加载组件

一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad:使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址. 二.应用实例demo /** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

js图片懒加载

<script type="text/javascript"> var lazyLoad = { // 获取元素到页面顶部的距离 getoffsetTop: function(elem){ var offTop = 0; while(elem != null){ offTop += elem.offsetTop; // 获取元素到其上一级元素顶部的距离 elem = elem.offsetParent; // 元素的上一级元素 } return offTop; }, //