关于分屏加载图片,像天猫、京东等电商图片较多页面很长,就采用了延迟加载技术。
目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,
随着页面的滚动,显示区域图片才被动态加载。
原理其实很简单,默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径,
再自定义一个属性存放原图片路径,通过绑定滚动事件,检查当前元素是否在浏览器窗口中,
然后替换src路径动态加载图片。
<!--more-->
在这里分享下~
前两天无聊的时候翻看自己微信朋友圈,偶然翻到以前关系挺好的朋友,虽然我们很少聊天,但是我自认为我们的关系还是挺不错的。所有就点开他的朋友圈,也想看看这哥们几年不见了,发生什么变化那,刚一打开整个页面显示的只有这几个大字“朋友仅展示最近三天的朋友圈”瞬间感觉挺失落的,说不上来。随后我开始翻阅更多人的朋友圈,才发现原来很多人都设置仅三天可见,好一些的会设置半年可见·······
我不知道为什么,后来有朋友告诉我说,是为了安全。或许吧,反正人家是这样说的,也许是不想让别人看见自己的故事吧。其实我倒觉得这没有什么,既然是朋友圈,就是分享你的快乐,记录你的心情,把你的故事分享给朋友们,那样大家会为你点赞评论,哪怕以后你打开翻看你这些记忆也是多么的美好!
其实人生有太多感性的东西写在朋友圈,你删掉,或者设置了不可见,身为朋友,大家可能每天都比较忙绿,见面的机会也会很少,曾几何时我们会在朋友圈晒生活,晒美食,晒幸福,会通过朋友圈发的内容来了解一个人的喜好。可是后来我们被太多的微商,太多的商品占据,夹杂了太多事物的时候,大家选择了沉默、已经失去了那份纯粹。
其实没有必要设置成三天可见,有时候真的没有必要,多年不见的朋友只是想看看你最近怎么 样了,平时联系的少,也就是通过朋友圈知道你最近的好与差那,很多时候还是i希望大家不要设置的好。不过随着社会的发张,这个社会慢慢的开始圈层社会,有的圈子融不进去就别硬融,每个东西都会有利弊,一体两面,就像你把朋友圈当成自己记录生活点滴的途径,别人眼里这就是装逼!总之做好自己,别管他们,你的人生别人无法来活;朋友圈也不再是那个原来的朋友圈!成了一种广告渠道!成了一种发泄,炫耀通道。
后来的我们就很少打开朋友圈了,或者直接关闭朋友圈管理,也不会有红色标点提示,大家开始越来越屏蔽自己,但是我觉得你可以不看朋友圈,也可以不发状态说说,但是请敞开心扉,对朋友不要再设置仅三天可见了,因为多久不见的朋友只是想你的时候看看你,或者心仪的人知是想多看看你。
因人而异吧,在这个纷纷扰扰的世界里,让我们保持一份仅有的那份真诚,多与朋友交流,多看看这个美丽的世界,交朋友是你人生的乐趣,请不要再把最近封闭的那么严实,让别人无法靠近你,这是上帝赐予要与这个社会享用的。
所以想认识你,不是三天之后的你!”我们不熟、你没有权访问”虽然不会干涉你的生活,但是每次点开会很失落。因为你正在阻挡一个真正关心你的人。
请记住:不用担心形象被毁,认识你的人都了解你,不认识的反正不认识,
所以、不发不发朋友圈、或者朋友圈设置多久,都无关乎你真正都生活!
数据源分析
本次练手的网站是携程,主题是欧洲游,进入目标页面,点击js插件。没有的朋友可以去装一个。也可以设置浏览器关闭js
原界面
禁用js后的界面
很多重要信息都不见了,这些内容就是js动态加载的。
上面我用的浏览器是火狐,因为装插件比较方便,下面换谷歌浏览器,分析方便。
目标界面-右键检查
在下面选择Network彩蛋
然后点击上面的刷新,拖动右边的长方形,拉到最下面,这样数据才能完全加载。
数据加载好后点击name排序,下面的文件都是刷新后加载的。找到我们要的数据文件。
可以看到储存在一个product文件中,preview是文件的人性化格式。
接下来就是获取这个文件了。爬虫原理就是模拟浏览器浏览。
点击Header查看文件的请求信息.。
本次主要使用一下信息。翻译一下就会明白都是什么
headers = {'Accept': 'application/json, text/javascript, */*; q=0.01', 'Accept-Language': 'zh-CN,zh;q=0.9', 'Cache-Control': 'no-cache', 'User-Agent':' Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36', 'Connection': 'keep-alive', 'Referer': 'http://vacations.ctrip.com/tours/r-europe-120002' }
还需要一个formdata,有这些信息就可以获取js加载的文件了。
formdata = { 'params': [{"Id":1606014,"Bu":"GT","Did":1},{"Id":1742175,"Bu":"GT","Did":1}, {"Id":1729325,"Bu":"GT","Did":1},{"Id":19825554,"Bu":"GT","Did":1},{"Id":1606014,"Bu":"GT","Did":1}], 'keyword': '欧洲' }
单个product文件获取代码
# -*- coding: utf-8 -*- import json import urllib import urllib2 import re url = "http://vacations.ctrip.com/tour-mainsite-vacations/api/product" headers = {'Accept': 'application/json, text/javascript, */*; q=0.01', 'Accept-Language': 'zh-CN,zh;q=0.9', 'Cache-Control': 'no-cache', 'User-Agent':' Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36', 'Connection': 'keep-alive', 'Referer': 'http://vacations.ctrip.com/tours/r-europe-120002' } formdata = { 'params': [{"Id":0,"Bu":"GT","Did":1}], 'keyword': '欧洲' } formdata['params'][0]['Id'] = 1979857 data = urllib.urlencode(formdata) request = urllib2.Request(url,data = data, headers = headers) response = urllib2.urlopen(request) value = json.loads(response.read()) pattern = re.compile(r'\d+') for item in value: print item["AdvanceBookingDays"] #观光天数 print item["DepartureCityName"] #出发城市名称 print item["DestinationName"] #目的地名称 print pattern.search(item["Price"]).group() #价格 print item["ScheduleDesc"] #班期 print item["VendorName"] #供应商名称 print item["TravelCount"] #观光客数量 print item["Score"] #评分 print item["CommentCount"] #点评数量
*然后这篇博客就结束啦,博主可以玩游戏啦?
当然没有,细心的小伙伴应该发现问题了,就是每个product文件的params是不同的。
每个params都包含了或多或少的json对象,每个对象都包含一个长长的不唯一的Id属性,聪明的小伙伴应该猜到了每一个json对象对应上面的一个旅游信息,那么这个Id是我的浏览器生成的吗,肯定不是,数据都是服务器传过来的。
进一步解析页面
用选择器选择旅游div,看他的源码,有一个叫data-params的属性包含了Id信息,而这个属性就在我们选中的div中。
幸好这一部分是静态的,我们Scrapy获取。首先创建一个scrapy项目,下面源码
item.py
# -*- coding: utf-8 -*- # Define here the models for your scraped items # # See documentation in: # https://doc.scrapy.org/en/latest/topics/items.html import scrapy class DazhongItem(scrapy.Item): # define the fields for your item here like: # name = scrapy.Field() pkgid = scrapy.Field()
middlewares.py
import scrapy from scrapy import signals from scrapy.downloadermiddlewares.useragent import UserAgentMiddleware import random class MyUserAgentMiddleware(UserAgentMiddleware): def __init__(self, user_agent): self.user_agent = user_agent @classmethod def from_crawler(cls,crawler): return cls( user_agent = crawler.settings.get('MY_USER_AGENT') ) def process_request(self, request, spider): agent = random.choice(self.user_agent) request.headers['User-Agent'] = agent
setting.py
# -*- coding: utf-8 -*- import scrapy # Scrapy settings for dazhong project # # For simplicity, this file contains only settings considered important or # commonly used. You can find more settings consulting the documentation: # # https://doc.scrapy.org/en/latest/topics/settings.html # https://doc.scrapy.org/en/latest/topics/downloader-middleware.html # https://doc.scrapy.org/en/latest/topics/spider-middleware.html BOT_NAME = 'DzdpCrawl' SPIDER_MODULES = ['DzdpCrawl.spiders'] NEWSPIDER_MODULE = 'DzdpCrawl.spiders' # Crawl responsibly by identifying yourself (and your website) on the user-agent MY_USER_AGENT = [ "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; AcooBrowser; .NET CLR 1.1.4322; .NET CLR 2.0.50727)", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Acoo Browser; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)", "Mozilla/4.0 (compatible; MSIE 7.0; AOL 9.5; AOLBuild 4337.35; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)", "Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US)", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET CLR 2.0.50727; Media Center PC 6.0)", "Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET CLR 1.0.3705; .NET CLR 1.1.4322)", "Mozilla/4.0 (compatible; MSIE 7.0b; Windows NT 5.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.04506.30)", "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/523.15 (KHTML, like Gecko, Safari/419.3) Arora/0.3 (Change: 287 c9dfb30)", "Mozilla/5.0 (X11; U; Linux; en-US) AppleWebKit/527+ (KHTML, like Gecko, Safari/419.3) Arora/0.6", "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.2pre) Gecko/20070215 K-Ninja/2.1.1", "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9) Gecko/20080705 Firefox/3.0 Kapiko/3.0", "Mozilla/5.0 (X11; Linux i686; U;) Gecko/20070322 Kazehakase/0.4.5", "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.8) Gecko Fedora/1.9.0.8-1.fc10 Kazehakase/0.5.6", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.20 (KHTML, like Gecko) Chrome/19.0.1036.7 Safari/535.20", "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; fr) Presto/2.9.168 Version/11.52", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 TaoBrowser/2.0 Safari/536.11", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.71 Safari/537.1 LBBROWSER", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; LBBROWSER)", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E; LBBROWSER)", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.84 Safari/535.11 LBBROWSER", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; QQBrowser/7.0.3698.400)", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E)", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SV1; QQDownload 732; .NET4.0C; .NET4.0E; 360SE)", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E)", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)", "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1", "Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; zh-cn) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5", "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:2.0b13pre) Gecko/20110307 Firefox/4.0b13pre", "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11", "Mozilla/5.0 (X11; U; Linux x86_64; zh-CN; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36", ] # Obey robots.txt rules ROBOTSTXT_OBEY = False # Configure maximum concurrent requests performed by Scrapy (default: 16) #CONCURRENT_REQUESTS = 32 # Configure a delay for requests for the same website (default: 0) # See https://doc.scrapy.org/en/latest/topics/settings.html#download-delay # See also autothrottle settings and docs DOWNLOAD_DELAY = 10 # The download delay setting will honor only one of: #CONCURRENT_REQUESTS_PER_DOMAIN = 16 #CONCURRENT_REQUESTS_PER_IP = 16 # Disable cookies (enabled by default) #COOKIES_ENABLED = False # Disable Telnet Console (enabled by default) #TELNETCONSOLE_ENABLED = False # Override the default request headers: #DEFAULT_REQUEST_HEADERS = { # 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8', # 'Accept-Language': 'en', #} # Enable or disable spider middlewares # See https://doc.scrapy.org/en/latest/topics/spider-middleware.html #SPIDER_MIDDLEWARES = { # 'dazhong.middlewares.DazhongSpiderMiddleware': 543, #} # Enable or disable downloader middlewares # See https://doc.scrapy.org/en/latest/topics/downloader-middleware.html DOWNLOADER_MIDDLEWARES = { 'scrapy.downloadermiddleware.useragent.UserAgentMiddleware': None, 'scrapy.downloadermiddlewares.useragent.UserAgentMiddleware': None, 'DzdpCrawl.middlewares.MyUserAgentMiddleware': 400, } # Enable or disable extensions # See https://doc.scrapy.org/en/latest/topics/extensions.html #EXTENSIONS = { # 'scrapy.extensions.telnet.TelnetConsole': None, #} # Configure item pipelines # See https://doc.scrapy.org/en/latest/topics/item-pipeline.html ITEM_PIPELINES = { 'DzdpCrawl.pipelines.DazhongPipeline': 300, } # Enable and configure the AutoThrottle extension (disabled by default) # See https://doc.scrapy.org/en/latest/topics/autothrottle.html #AUTOTHROTTLE_ENABLED = True # The initial download delay #AUTOTHROTTLE_START_DELAY = 5 # The maximum download delay to be set in case of high latencies #AUTOTHROTTLE_MAX_DELAY = 60 # The average number of requests Scrapy should be sending in parallel to # each remote server #AUTOTHROTTLE_TARGET_CONCURRENCY = 1.0 # Enable showing throttling stats for every response received: #AUTOTHROTTLE_DEBUG = False # Enable and configure HTTP caching (disabled by default) # See https://doc.scrapy.org/en/latest/topics/downloader-middleware.html#httpcache-middleware-settings #HTTPCACHE_ENABLED = True #HTTPCACHE_EXPIRATION_SECS = 0 #HTTPCACHE_DIR = 'httpcache' #HTTPCACHE_IGNORE_HTTP_CODES = [] #HTTPCACHE_STORAGE = 'scrapy.extensions.httpcache.FilesystemCacheStorage'
pipelines.py
# -*- coding: utf-8 -*- from openpyxl import Workbook class DazhongPipeline(object): # 设置工序一 def __init__(self): self.wb = Workbook() self.ws = self.wb.active self.ws.append(['pkgid']) # 设置表头 def process_item(self, item, spider): # 工序具体内容 line = [item['pkgid']] # 把数据中每一项整理出来 self.ws.append(line) # 将数据以行的形式添加到xlsx中 self.wb.save('pkgid.xlsx') # 保存xlsx文件 return item def spider_closed(self, spider): self.file.close()
Dzdpspider.py
# -*- coding: utf-8 -*- import scrapy import re from bs4 import BeautifulSoup from scrapy.http import Request from ..items import DazhongItem import json import xlrd import xlwt from xlutils.copy import copy class DzSpider(scrapy.Spider): name = 'dz' allowed_domains = ['vacations.ctrip.com'] first_url = 'http://vacations.ctrip.com/tours/r-europe-120002/' last_url = 'p' filename = 'D:\python\DzdpScrpy\Allpkgid.json' list = [] def start_requests(self): for i in range(1,101): url = self.first_url + self.last_url + str(i) yield Request(url,self.parse) def parse(self, response): soup = BeautifulSoup(response.body,'lxml') item = DazhongItem() for site in soup.find_all('div',class_='main_mod product_box flag_product '): try: str = site.attrs['data-tracevalue'] json_1 = json.loads(str) item['pkgid'] = json_1['pkgid'] yield item except: pass
结果:
这下Id有了,接下来就是获取数据了。把Id从Excel表格中迭代出来,可以选择生成一个巨大的formdata,也可已从下面赋值,一个一个地取
Excel表格的操作可以看我的另一篇文章。
有问题留言,我尽力帮助
祝爬虫顺利~~~
更多机会与学习资料加入下方QQ群
在一个页面中,上下有几个块级元素,其中动态填充图片,为了页面的美观,要求图片间紧密结合,没有空白。
然而,在IE下,中间一张图片下总是会出现一小段空白,FF下倒正常。我尝试设置了各种属性,包括margin、padding等,均没有效果,很是不爽。
后来,看到网友介绍设置image的float属性可以解决这个问题,于是就尝试加上这个样式:
float:left
果然,讨厌的空白不见了,无论在ie还是ff下都很正常。
为什么设置图片浮动就能消除IE下出现的空白呢?这个问题我还没有想明白。我查了一下资料,float元素可以使用文字环绕在一个元素的四周。那么,设置为left,也就是可以让图片浮动在左边。但是,在IE下,图片下的这一小段空白是如何产生的,由于对float的理解并不是很深刻,我依然不能理解,如果你对此很了解,希望能赐教。
关于分屏加载图片,像天猫、京东等电商图片较多页面很长,就采用了延迟加载技术。
目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,
随着页面的滚动,显示区域图片才被动态加载。
原理其实很简单,默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径,
再自定义一个属性存放原图片路径,通过绑定滚动事件,检查当前元素是否在浏览器窗口中,
然后替换src路径动态加载图片。
<!--more-->
在这里分享下~