CN112926009A - 图片资源的处理方法、装置、电子设备和介质 - Google Patents

图片资源的处理方法、装置、电子设备和介质 Download PDF

Info

Publication number
CN112926009A
CN112926009A CN202110335777.3A CN202110335777A CN112926009A CN 112926009 A CN112926009 A CN 112926009A CN 202110335777 A CN202110335777 A CN 202110335777A CN 112926009 A CN112926009 A CN 112926009A
Authority
CN
China
Prior art keywords
picture
target compressed
webpage
page
loading
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110335777.3A
Other languages
English (en)
Inventor
孟繁贵
梁锐
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
CCB Finetech Co Ltd
Original Assignee
CCB Finetech Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by CCB Finetech Co Ltd filed Critical CCB Finetech Co Ltd
Priority to CN202110335777.3A priority Critical patent/CN112926009A/zh
Publication of CN112926009A publication Critical patent/CN112926009A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种图片资源的处理方法、装置、电子设备和介质。本发明实施例涉及互联网技术。其中,该方法包括:获取目标网页在构建过程中所需的原始图片;并确定原始图片的配置化信息和原始图片的存储格式;根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片;若检测到浏览器触发的网页浏览事件,则获取浏览器的版本号;根据浏览器的版本号和预设加载策略对目标压缩图片进行加载展示。本发明实施例能够在网页的制作过程中预先制作出目标压缩图片,减少网页渲染时间,从而加快网页中图片的展示效率。

Description

图片资源的处理方法、装置、电子设备和介质
技术领域
本发明实施例涉及互联网技术,尤其涉及一种图片资源的处理方法、装置、电子设备和介质。
背景技术
随着网络技术的发展,网页上展示的资源(包括图片、音频、视频、网页样式文件以及字体文件等)数量和规模都在急剧增加;网页的资源占比主要由网页上的图片资源决定;根据统计数据:2011年到2019年网站图片资源增长数据为:PC(Personal Computer,个人计算机)端网页从平均250KB增长到900KB,而移动端网页从平均100KB增长至850KB。可得,网站网页上资源数量越来越多,网页总大小越来越大。移动端网页展现时容易出现展示慢且白屏的现象,严重影响用户体验。网页“白屏”时间大于5秒时,用户关闭网页的几率就会大幅提升,从而降低了网站用户的留存率,降低了用户粘性;因此,网页资源的展示变得至关重要。
目前,对于网页中图片资源的压缩主要是基于已经制成的网页进行后期改动来实现,即网页制成后,压缩开发者从网页中下载出需要进行压缩的原图片,对其进行压缩处理,再将压缩后的图片更新至网页中,以替换原图片。
上述方案的缺陷在于:网页图片更新过程需要在网页制成后通过压缩人员手动替换,效率较低且工作量大。
发明内容
本申请实施例提供一种图片资源的处理方法、装置、电子设备和介质,可以在网页的制作过程中对需要展示的图片进行自动压缩,减少网页渲染时间,从而加快网页中图片的展示效率。
第一方面,本发明实施例提供了一种图片资源的处理方法,包括:
获取目标网页在构建过程中所需的原始图片;并确定所述原始图片的配置化信息和所述原始图片的存储格式;
根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片;
若检测到浏览器触发的网页浏览事件,则获取所述浏览器的版本号;
根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示。
可选的,根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片,包括:
按照所述原始图片的存储格式,从压缩规则数据库中选择所述存储格式关联的压缩程序;其中,所述压缩规则数据库中包括存储格式与压缩程序的关联关系;
根据所述配置化信息执行所述压缩程序,以对所述原始图片进行压缩存储,得到所述原始图片经过压缩后的目标压缩图片。
可选的,确定所述原始图片的配置化信息,包括:
响应于配置化信息填写请求,将所述配置化信息填写请求中携带的压缩信息更新至所述原始图片的附加信息中,得到所述原始图片的配置化信息;其中,所述压缩信息包括压缩比例。
可选的,所述原始图片的存储格式包括如下至少一种:小体积格式、尺寸可调格式和颜色可调格式;所述小体积格式包括gif、jpeg和webp;所述尺寸可调格式包括svg;所述颜色可调格式包括pgn。
可选的,获取目标网页在构建过程中所需的原始图片,包括:
获取目标网页中的文本信息;
根据所述文本信息从网页图片资源库中查找匹配度最高的网页图片,作为所述文本信息的原始图片。
可选的,根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示,包括:
若检测到所述浏览器的版本号属于第一范围,则根据延迟属性标签对所述目标压缩图片进行加载展示;
若检测到所述浏览器的版本号属于第二范围,则根据图片监测结果对所述目标压缩图片进行加载展示;
若检测到所述浏览器的版本号属于第三范围,则根据页面监测结果对所述目标压缩图片进行加载展示。
可选的,根据延迟属性标签对所述目标压缩图片进行加载展示,包括:
在目标压缩图片的初始属性信息中添加延迟属性标签;
检测待浏览页面进入网页可视区域的时间是否小于预设时间阈值;其中,所述待浏览页面中包括未加载的目标压缩图片;
若是,则加载所述目标压缩图片,用于将所述目标压缩图片展示在网页可视区域中。
可选的,根据图片监测结果对所述目标压缩图片进行加载展示,包括:
通过图片监测接口监测网页资源中存储的所有未加载的目标压缩图片;
若监测到所有未加载的目标压缩图片中存在一个未加载的目标压缩图片的距离与网页可视区域下边界的距离小于预设距离阈值,则加载所述目标压缩图片。
可选的,加载所述目标压缩图片,包括:
将所述目标压缩图片添加至所述网页可视区域中的图片存储位置;
将所述图片监测接口的运行状态从工作调整为暂停,并在检测到所述目标压缩图片已移出网页可视区域上边界之后,恢复所述图片监测接口的运行状态为工作。
可选的,根据页面监测结果对所述目标压缩图片进行加载展示,包括:
通过页面监测接口监测是否存在页面滚动事件;
若存在,则判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片;
若具有,则加载所述移动页面中的目标压缩图片。
可选的,加载所述移动页面中的目标压缩图片,包括:
将所述目标压缩图片添加至所述移动页面中的图片存储位置;
将所述页面监测接口的运行状态从工作调整为暂停,并在检测到所述移动页面中不再具有所述目标压缩图片之后,恢复所述页面监测接口的运行状态为工作。
可选的,判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片,包括:
检测页面滚动事件的移动页面中是否出现未加载图片的待展示标识;
若出现,则判定页面滚动事件的移动页面中具有未加载的目标压缩图片。
第二方面,本发明实施例提供了一种图片资源的处理装置,包括:
图片获取模块,用于获取目标网页在构建过程中所需的原始图片;并确定所述原始图片的配置化信息和所述原始图片的存储格式;
图片压缩模块,用于根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片;
版本号获取模块,用于若检测到浏览器触发的网页浏览事件,则获取所述浏览器的版本号;
图片加载模块,用于根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示。
可选的,图片压缩模块,具体用于:
按照所述原始图片的存储格式,从压缩规则数据库中选择所述存储格式关联的压缩程序;其中,所述压缩规则数据库中包括存储格式与压缩程序的关联关系;
根据所述配置化信息执行所述压缩程序,以对所述原始图片进行压缩存储,得到所述原始图片经过压缩后的目标压缩图片。
可选的,图片获取模块,具体用于:
响应于配置化信息填写请求,将所述配置化信息填写请求中携带的压缩信息更新至所述原始图片的附加信息中,得到所述原始图片的配置化信息;其中,所述压缩信息包括压缩比例。
可选的,所述原始图片的存储格式包括如下至少一种:小体积格式、尺寸可调格式和颜色可调格式;所述小体积格式包括gif、jpeg和webp;所述尺寸可调格式包括svg;所述颜色可调格式包括pgn。
可选的,图片获取模块。具体用于:
获取目标网页中的文本信息;
根据所述文本信息从网页图片资源库中查找匹配度最高的网页图片,作为所述文本信息的原始图片。
可选的,图片加载模块包括:第一加载单元、第二加载单元和第三加载单元;
第一加载单元,用于若检测到所述浏览器的版本号属于第一范围,则根据延迟属性标签对所述目标压缩图片进行加载展示;
第二加载单元,用于若检测到所述浏览器的版本号属于第二范围,则根据图片监测结果对所述目标压缩图片进行加载展示;
第三加载单元,用于若检测到所述浏览器的版本号属于第三范围,则根据页面监测结果对所述目标压缩图片进行加载展示。
可选的,第一加载单元,具体用于:
在目标压缩图片的初始属性信息中添加延迟属性标签;
检测待浏览页面进入网页可视区域的时间是否小于预设时间阈值;其中,所述待浏览页面中包括未加载的目标压缩图片;
若是,则加载所述目标压缩图片,用于将所述目标压缩图片展示在网页可视区域中。
可选的,第二加载单元包括:图片监测子单元和图片加载子单元;
图片监测子单元,用于通过图片监测接口监测网页资源中存储的所有未加载的目标压缩图片;
图片加载子单元,用于若监测到所有未加载的目标压缩图片中存在一个未加载的目标压缩图片的距离与网页可视区域下边界的距离小于预设距离阈值,则加载所述目标压缩图片。
可选的,图片加载子单元,具体用于:
将所述目标压缩图片添加至所述网页可视区域中的图片存储位置;
将所述图片监测接口的运行状态从工作调整为暂停,并在检测到所述目标压缩图片已移出网页可视区域上边界之后,恢复所述图片监测接口的运行状态为工作。
可选的,第三加载单元包括:事件监测子单元、图片判断子单元和图片加载子单元;
事件监测子单元,用于通过页面监测接口监测是否存在页面滚动事件;
图片判断子单元,用于若存在,则判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片;
图片加载子单元,用于若具有,则加载所述移动页面中的目标压缩图片。
可选的,图片加载子单元,具体用于:
将所述目标压缩图片添加至所述移动页面中的图片存储位置;
将所述页面监测接口的运行状态从工作调整为暂停,并在检测到所述移动页面中不再具有所述目标压缩图片之后,恢复所述页面监测接口的运行状态为工作。
可选的,图片判断子单元,具体用于:
检测页面滚动事件的移动页面中是否出现未加载图片的待展示标识;
若出现,则判定页面滚动事件的移动页面中具有未加载的目标压缩图片。
第三方面,本发明实施例还提供了一种电子设备,该电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例中的任一种所述的图片资源的处理方法。
第四方面,本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现本发明实施例中的任一种所述的图片资源的处理方法。
本发明实施例获取目标网页在构建过程中所需的原始图片;并确定原始图片的配置化信息和原始图片的存储格式;根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片;若检测到浏览器触发的网页浏览事件,则获取浏览器的版本号;根据浏览器的版本号和预设加载策略对目标压缩图片进行加载展示。本发明实施例能够在网页的制作过程中预先制作出目标压缩图片,减少网页渲染时间,从而加快网页中图片的展示效率。
附图说明
图1是本发明实施例一中的图片资源的处理方法的流程示意图;
图2是本发明实施例二中的图片资源的处理方法的流程示意图;
图3是本发明实施例三中的图片资源的处理装置的结构示意图;
图4是本实施例四中的电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图1是本发明实施例一中的图片资源的处理方法的流程示意图。本实施例可适用于在网站网页的制作过程中对网页图片进行自动压缩的的情况。本实施例方法可由图片资源的处理装置来执行,该装置可采用硬件/或软件的方式来实现,并可配置于电子设备中。可实现本申请任意实施例所述的图片资源的处理方法。如图1所示,该方法具体包括如下:
S110、获取目标网页在构建过程中所需的原始图片;并确定原始图片的配置化信息和原始图片的存储格式。
在本实施例中,原始图片为网页的制作人员选取的与网页中的文本信息匹配存在的展示图片;该展示图片可通过人工拍摄得到,例如通过拍摄设备进行景物或者实体结构的拍摄得到;在网页中添加展示图片能够使得浏览者对该网页的展示内容得到更为清晰直观的了解,以增强浏览者对网页内容的有效认知。
由于原始图片的资源占比较大,直接放在网站网页中可能会导致该网页的资源占比也增大,在浏览过程中可能会影响浏览器的展示性能,从而降低浏览者的浏览体验,因此,需要对网站网页中的原始图片进行压缩处理,以弥补浏览器性能较低的缺陷,从而增强浏览器的展示效果。
在本实施例中,可选的,获取目标网页在构建过程中所需的原始图片,包括:
获取目标网页中的文本信息;
根据文本信息从网页图片资源库中查找匹配度最高的网页图片,作为文本信息的原始图片。
其中,在制作目标网页的过程中,其网页上展现的文本信息(例如文字内容)需要与待展示的图片具有唯一对应关系,以实现网页展现数据的图文对应;网页图片资源库中存储在多类图像,该图像可支持用户的自定义导入。本实施例通过目标网页中的文本信息与网页图片的匹配度作为衡量目标网页内原始图片的标准,从而提高了目标网页中展示图片与展示文本的可匹配性。
S120、根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片。
在本实施例中,原始图片的配置化信息可通过网页制作人员进行数据配置得到,也可根据原始图片的默认配置数据进行查找得到。压缩规则数据库可以为预先引入的图片压缩资源总包“imagemin”,其中以压缩资源包的形式存储着不同图片存储格式的压缩方式,例如,gif图片格式压缩资源包“imagemin-gifsicle”、jpeg(jpg)图片格式压缩资源包“imagemin-mozjpeg”、pgn图片压缩资源包“imagemin-pngquant”、svg图片压缩资源包“imagemin-svgo”和webp图片压缩资源包“imagemin-webp”。
S130、若检测到浏览器触发的网页浏览事件,则获取浏览器的版本号。
在本实施例中,浏览器为移动设备中用于展示网络信息的应用软件,是一个可把在互联网上能找到的文本文档翻译成网页,网页中可以包含图形、音频、视频和文本,以使得用户可以通过安装在移动设备中的应用软件实现与网页信息的实时交互;其中,移动设备包括PC、智能手机或者平板电脑等。若检测到浏览器中的网页页面发生切换,则判定检测到浏览器触发的网页浏览事件。
其中,目前常用到的浏览器可包括:IE、360安全浏览器、火狐、搜狗、谷歌、opera,maxthon(傲游)、greenbrowser、chrome。
获取浏览器的版本号可包括:使用navigator.userAgent获取浏览器信息,根据其返回值确定浏览器的版本号;navigator.userAgent为通过JavaScript编写出的代码,用来查看浏览器的版本号。示例性的,“Mozilla/5.0(Windows NT 10.0;Win64;x64)AppleWebKit/537.36(KHTML,like Gecko)Chrome/81.0.4044.129 Safari/537.36”,其中“Chrome/81.0.4044.129”表示浏览器版本为81.0.4044.129,即版本号为81。
S140、根据浏览器的版本号和预设加载策略对目标压缩图片进行加载展示。
由于现有技术对网站网页中的图片资源进行压缩处理时,主要是在网站网页已经建成的基础上进行后期的改动,即通过专业人员手动将网站网页中的原始图片下载下来,再通过第三方软件(例如PhotoShop)将原始图像进行压缩处理,得到压缩图片,再将该压缩图片替换原始图片存储在网站网页中原始图像的存储位置上,以实现对网站网页中图片的资源优化;该方法实现需要专业人员手动对每一张图片进行压缩替换,需要消耗较大人力且压缩时间较长,而且是在网站网页已经建成后才进行处理。
本实施例中预先制作的目标压缩图片是在网页建立的过程中同时进行的,从而使得建立好的网站网页不用再进行后期任何处理即可直接通过浏览器向用户展示,能够加快网站网页的展示速度,同时,网页中图片资源的优化也能够有效提高用户的体验。
需要说明的是,预设加载策略与浏览器的版本号相对应,通过设置加载策略能够在浏览到图片时才对图片进行加载展示,从而避免网页浏览过程中较多图片同时加载导致网站性能损耗过大的问题。
在上述实施例的基础上,可选的,根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片,包括:
按照原始图片的存储格式,从压缩规则数据库中选择存储格式关联的压缩程序;其中,压缩规则数据库中包括存储格式与压缩程序的关联关系;
根据配置化信息执行压缩程序,以对原始图片进行压缩存储,得到原始图片经过压缩后的目标压缩图片。
其中,本实施例通过不同图片的存储格式选取压缩方式,并结合原始图片的配置化信息对原始图片进行资源压缩,能够有效提高网页中图片资源的压缩效率。。
需要说明的是,选取与存储格式对应的压缩方式对原始图片进行压缩,得到原始图片经过压缩后的目标压缩图片;在将目标压缩图片输出至网站网页中,输出的图片格式为二进制文件格式。
在上述实施例的基础上,可选的,确定原始图片的配置化信息,包括:
响应于配置化信息填写请求,将配置化信息填写请求中携带的压缩信息更新至原始图片的附加信息中,得到原始图片的配置化信息;其中,压缩信息包括压缩比例。
其中,配置化信息填写请求可由网页制作人员发起,用于对原始图片的配置化信息根据需求进行自定义处理;原始图片的附加信息中存储着该原始图片中默认的配置数据,根据配置化信息填写请求中携带的压缩信息对附加信息进行数据更新操作,能够使得得出的原始图片的配置化信息附带网页制作人员的需求设定,同时提高配置化信息的可操作性。
配置图片压缩资源的信息可参见如下操作。
Figure BDA0002997542550000131
其中,“mozjpeg”选项的值是一个对象格式,若开发者将“mozjpeg”字段配置为字符串或者数组时webpack就会报错,可利用该特点对配置化信息进行配置校验。
使用webpack loader插件进行图片压缩;配置图片压缩为异步调用,即图片压缩不会堵塞webpack主程序,webpack可以继续操作其他内容;配置图片压缩缓存,即处理过的图片会存储在webpack缓存中,下次直接使用缓存结果,而不需要重新对图片压缩,提升webpack的网页构建效率。
在上述实施例的基础上,可选的,原始图片的存储格式包括如下至少一种:小体积格式、尺寸可调格式和颜色可调格式;小体积格式包括gif、jpeg和webp;尺寸可调格式包括svg;颜色可调格式包括pgn。其中,小体积格式为可存储资源占比较小的图片;gif(graphics interchange format),采用无损压缩算法(例如LZW)进行编码;采用gif格式保存图片不会降低图片质量;jpeg为通过有损压缩算法进行编码得到的,与gif相比,jpeg不适合用来存储企业Logo和线框类的图;webP可同时支持有损和无损压缩的,在无损压缩的情况下,相同质量的webP图片,文件大小要比pgn小26%,在有损压缩的情况下,具有相同图片精度的webP图片,文件大小要比jpeg小25%~34%。svg(scalable vector graphics)是矢量图,可支持图片的修改。本实施例通过设置多种图片的存储格式,能够有效满足网站网页中图片的多样性。
本发明实施例获取目标网页在构建过程中所需的原始图片;并确定原始图片的配置化信息和原始图片的存储格式;根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片;若检测到浏览器触发的网页浏览事件,则获取浏览器的版本号;根据浏览器的版本号和预设加载策略对目标压缩图片进行加载展示。本发明实施例能够在网页的制作过程中预先制作出目标压缩图片,减少网页渲染时间,从而加快网页中图片的展示效率。
实施例二
图2是本发明实施例二中的图片资源的处理方法的流程示意图。本实施例是在上述实施例的基础上进一步扩展与优化,并可与上述技术方案中任意可选方案组合。如图2所示,该方法包括:
S210、获取目标网页在构建过程中所需的原始图片;并确定原始图片的配置化信息和原始图片的存储格式。
S220、根据原始图片的配置化信息和原始图片的存储格式确定目标压缩图片。
S230、若检测到浏览器触发的网页浏览事件,则获取浏览器的版本号。
S240、检测浏览器的版本号是否属于第一范围;若是,则执行S250;若否,则执行S260。
S250、根据延迟属性标签对目标压缩图片进行加载展示。
在本实施例中,第一范围可认为是浏览器的大版本号范围,例如可设置为版本号≥77;延迟属性标签为在目标压缩图像的属性标签中添加的能够延迟图片加载的标签,从而减少了网页打开时图片请求数量,进一步提高网页图片资源的展示速度。
在本实施例中,可选的,根据延迟属性标签对目标压缩图片进行加载展示,包括:
在目标压缩图片的初始属性信息中添加延迟属性标签;
检测待浏览页面进入网页可视区域的时间是否小于预设时间阈值;其中,待浏览页面中包括未加载的目标压缩图片;
若是,则加载目标压缩图片,用于将目标压缩图片展示在网页可视区域中。
其中,可通过操作<img src="image.jpg"alt="img描述"loading="lazy">实现在目标压缩图片的初始属性信息中添加延迟属性标签;通过简单添加一个loading属性实现图片延迟加载,仅配置html上img标签一个属性即可,不需要执行JavaScript脚本,操作简捷。
具体的,待浏览页面为当前浏览页面的下一个浏览页面,待浏览页面进入网页可视区域的时间可根据浏览者的浏览其他页面的时间进行预估得出;本实施例中当浏览者在浏览当前网页页面时,其他网页页面中的目标压缩图片均为未加载状态,即不显示目标压缩图片。
S260、检测浏览器的版本号是否第二范围,若是,则执行S270;若否,则执行S280。
S270、根据图片监测结果对目标压缩图片进行加载展示。
在本实施例中,第二范围可认为是浏览器的中版本号范围,例如可设置为51≤版本号≤77;图片监测结果为对网站网页中的所有未加载的目标压缩图片的监测结果。
在本实施例中,可选的,根据图片监测结果对目标压缩图片进行加载展示,包括:
通过图片监测接口监测网页资源中存储的所有未加载的目标压缩图片;
若监测到所有未加载的目标压缩图片中存在一个未加载的目标压缩图片的距离与网页可视区域下边界的距离小于预设距离阈值,则加载目标压缩图片。
在本实施例中,图片监测接口为监测网页中所有未加载的目标压缩图片的接口,例如IntersectionObserver API;网页可视区域为显示网页信息的移动式设备的屏幕区域。
具体的,将网页资源中存储的每一个未加载的目标压缩图片绑定一个observe监听事件,该监听事件逻辑是创建IntersectionObserver构造函数,实现内容是当目标压缩图片进入到网页可视区域时(目标压缩图片进入网页可视区域的距离是可以配置的,如将网页向下滚屏时目标压缩图片的顶部区域距离网页可视区域的距离设置为0像素,表示当目标压缩图片顶部刚刚出现在网页可视区域就可进行图片加载;如将网页向下滚屏时目标压缩图片的顶部区域距离网页可视区域的距离设置为10像素,表示目标压缩图片顶部距离网页可视区域还有10个像素时,此时图片还没有展示,即可进行图片加载操作。本实施例通过设置图片监测接口实时监测网页图片,以通过较小的监听量即可实现图片的高效加载。
在本实施例中,可选的,加载目标压缩图片,包括:
将目标压缩图片添加至网页可视区域中的图片存储位置;
将图片监测接口的运行状态从工作调整为暂停,并在检测到目标压缩图片已移出网页可视区域上边界之后,恢复图片监测接口的运行状态为工作。
其中,可通过如下操作实现将目标压缩图片添加至网页可视区域中的图片存储位置。
将未加载的目标压缩图片img标签的src链接设为同一张占位图片(比如空白图片),如:
<img alt="loading"src="./loading.gif"/>;
给img标签设置自定义属性(比如data-src),将加载后的目标压缩图片的地址存储在data-src中,即可实现目标压缩图片的加载,如:
<img alt="loading"src="./loading.gif"data-src='./public/img/account.png'/>。
具体的,将图片监测接口的运行状态从工作调整为暂停是为了防止目标压缩图片再次执行延迟加载策略而造成的页面混乱;并在检测到目标压缩图片已移出网页可视区域上边界之后,恢复图片监测接口的运行状态为工作,从而不影响其他未加载的目标压缩图片的待加载操作。
S280、若检测到浏览器的版本号属于第三范围,则根据页面监测结果对目标压缩图片进行加载展示。
在本实施例中,第三范围可认为是浏览器的小版本号范围,例如可设置为版本号≤51;页面监测结果为对网站网页中移动页面的监测结果。由于浏览器不同版本号的性能不同,因此本实施例中通过对不同浏览器的版本号设置对应的图片加载策略,以实现不同版本号下目标压缩图片的有效加载。
在本实施例中,可选的,根据页面监测结果对目标网页中预先制作的目标压缩图片进行加载展示,包括:
通过页面监测接口监测是否存在页面滚动事件;
若存在,则判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片;
若具有,则加载移动页面中的目标压缩图片。
其中,本实施例中监听滚屏事件可适用于浏览器的版本号较低的情况;页面监测接口为监测存在页面滚动事件中移动页面的目标压缩图片的展示情况,以对需要加载的目标压缩页面进行及时加载,以网页页面中图片资源的展现效率。
在上述实施例的基础上,可选的,加载移动页面中的目标压缩图片,包括:
将目标压缩图片添加至移动页面中的图片存储位置;
将页面监测接口的运行状态从工作调整为暂停,并在检测到移动页面中不再具有目标压缩图片之后,恢复页面监测接口的运行状态为工作。
其中,移动页面中的图片存储位置中无任何图片存储,仅是一张占位图,是用户存储加载后的目标压缩图片,将加载后的目标压缩图片存储在移动页面中的图片存储位置上,以实现目标压缩图片的实时展示。
在上述实施例的基础上,可选的,判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片,包括:
检测页面滚动事件的移动页面中是否出现未加载图片的待展示标识;
若出现,则判定页面滚动事件的移动页面中具有未加载的目标压缩图片。
其中,未加载图片的待展示标识可为占位符图片的空白标识,例如“?”,以表示该位置存储着待加载的目标压缩图片;未加载图片的待展示标识可预先设置在浏览器中待展示图片资源的存储位置上。本实施例能够通过移动页面中未加载图片的待展示标识迅速准确的查找到移动页面中是否具有待记载的目标压缩图片,以实现对待加载的目标压缩图片的实时加载,从而避免移动页面中未加载图片的待展示标识出现在网页可视区域中影响浏览者较低观感的问题。
实施例三
图3是本发明实施例三中的图片资源的处理装置的结构示意图,本实施例可适用于在网站网页的制作过程中对网页图片进行自动压缩的情况。该装置配置于电子设备中,可实现本申请任意实施例所述的图片资源的处理方法。该装置具体包括如下:
图片获取模块310,用于获取目标网页在构建过程中所需的原始图片;并确定所述原始图片的配置化信息和所述原始图片的存储格式;
图片压缩模块320,用于根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片;
版本号获取模块330,用于若检测到浏览器触发的网页浏览事件,则获取所述浏览器的版本号;
图片加载模块340,用于根据所述浏览器的版本号和预设加载策略对目标网页中预先制作的目标压缩图片进行加载展示。
在上述实施例的基础上,可选的,图片压缩模块320,具体用于:
按照所述原始图片的存储格式,从压缩规则数据库中选择所述存储格式关联的压缩程序;其中,所述压缩规则数据库中包括存储格式与压缩程序的关联关系;
根据所述配置化信息执行所述压缩程序,以对所述原始图片进行压缩存储,得到所述原始图片经过压缩后的目标压缩图片。
在上述实施例的基础上,可选的,图片获取模块310,具体用于:
响应于配置化信息填写请求,将所述配置化信息填写请求中携带的压缩信息更新至所述原始图片的附加信息中,得到所述原始图片的配置化信息;其中,所述压缩信息包括压缩比例。
在上述实施例的基础上,可选的,所述原始图片的存储格式包括如下至少一种:小体积格式、尺寸可调格式和颜色可调格式;所述小体积格式包括gif、jpeg和webp;所述尺寸可调格式包括svg;所述颜色可调格式包括pgn。
在上述实施例的基础上,可选的,图片获取模块310,具体用于:
获取目标网页中的文本信息;
根据所述文本信息从网页图片资源库中查找匹配度最高的网页图片,作为所述文本信息的原始图片。
在上述实施例的基础上,可选的,图片加载模块340包括:第一加载单元、第二加载单元和第三加载单元;
第一加载单元,用于若检测到所述浏览器的版本号属于第一范围,则根据延迟属性标签对所述目标压缩图片进行加载展示;
第二加载单元,用于若检测到所述浏览器的版本号属于第二范围,则根据图片监测结果对所述目标压缩图片进行加载展示;
第三加载单元,用于若检测到所述浏览器的版本号属于第三范围,则根据页面监测结果对所述目标压缩图片进行加载展示。
在上述实施例的基础上,可选的,第一加载单元,具体用于:
在目标压缩图片的初始属性信息中添加延迟属性标签;
检测待浏览页面进入网页可视区域的时间是否小于预设时间阈值;其中,所述待浏览页面中包括未加载的目标压缩图片;
若是,则加载所述目标压缩图片,用于将所述目标压缩图片展示在网页可视区域中。
在上述实施例的基础上,可选的,第二加载单元包括:图片监测子单元和图片加载子单元;
图片监测子单元,用于通过图片监测接口监测网页资源中存储的所有未加载的目标压缩图片;
图片加载子单元,用于若监测到所有未加载的目标压缩图片中存在一个未加载的目标压缩图片的距离与网页可视区域下边界的距离小于预设距离阈值,则加载所述目标压缩图片。
在上述实施例的基础上,可选的,图片加载子单元,具体用于:
将所述目标压缩图片添加至所述网页可视区域中的图片存储位置;
将所述图片监测接口的运行状态从工作调整为暂停,并在检测到所述目标压缩图片已移出网页可视区域上边界之后,恢复所述图片监测接口的运行状态为工作。
在上述实施例的基础上,可选的,第三加载单元包括:事件监测子单元、图片判断子单元和图片加载子单元;
事件监测子单元,用于通过页面监测接口监测是否存在页面滚动事件;
图片判断子单元,用于若存在,则判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片;
图片加载子单元,用于若具有,则加载所述移动页面中的目标压缩图片。
在上述实施例的基础上,可选的,图片加载子单元,具体用于:
将所述目标压缩图片添加至所述移动页面中的图片存储位置;
将所述页面监测接口的运行状态从工作调整为暂停,并在检测到所述移动页面中不再具有所述目标压缩图片之后,恢复所述页面监测接口的运行状态为工作。
在上述实施例的基础上,可选的,图片判断子单元,具体用于:
检测页面滚动事件的移动页面中是否出现未加载图片的待展示标识;
若出现,则判定页面滚动事件的移动页面中具有未加载的目标压缩图片。
通过本发明实施例三的图片资源的处理装置,能够在网页的制作过程中预先制作出目标压缩图片,减少网页渲染时间,从而加快网页中图片的展示效率。
本发明实施例所提供的图片资源的处理装置可执行本发明任意实施例所提供的图片资源的处理方法,具备执行方法相应的功能模块和有益效果。
实施例四
图4是本发明实施例四中的电子设备的结构示意图,如图4所示,该电子设备包括处理器410、存储器420、输入装置430和输出装置440;电子设备中处理器410的数量可以是一个或多个,图4中以一个处理器410为例;电子设备中的处理器410、存储器420、输入装置430和输出装置440可以通过总线或其他方式连接,图4中以通过总线连接为例。
存储器420作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本发明实施例中的图片资源的处理方法对应的程序指令/模块。处理器410通过运行存储在存储器420中的软件程序、指令以及模块,从而执行电子设备的各种功能应用以及数据处理,即实现本发明实施例所提供的图片资源的处理方法。
存储器420可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作***、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储器420可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器420可进一步包括相对于处理器410远程设置的存储器,这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置430可用于接收输入的数字或字符信息,以及产生与电子设备的用户设置以及功能控制有关的键信号输入,可以包括键盘、鼠标等。输出装置440可包括显示屏等显示设备。
实施例五
本实施例提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于实现本发明实施例所提供的图片资源的处理方法。
当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的方法操作,还可以执行本发明任意实施例所提供的图片资源的处理方法中的相关操作。
通过以上关于实施方式的描述,所属领域的技术人员可以清楚地了解到,本发明可借助软件及必需的通用硬件来实现,当然也可以通过硬件实现,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是,上述搜索装置的实施例中,所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (15)

1.一种图片资源的处理方法,其特征在于,所述方法包括:
获取目标网页在构建过程中所需的原始图片;并确定所述原始图片的配置化信息和所述原始图片的存储格式;
根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片;
若检测到浏览器触发的网页浏览事件,则获取所述浏览器的版本号;
根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示。
2.根据权利要求1所述的方法,其特征在于,根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片,包括:
按照所述原始图片的存储格式,从压缩规则数据库中选择所述存储格式关联的压缩程序;其中,所述压缩规则数据库中包括存储格式与压缩程序的关联关系;
根据所述配置化信息执行所述压缩程序,以对所述原始图片进行压缩存储,得到所述原始图片经过压缩后的目标压缩图片。
3.根据权利要求1所述的方法,其特征在于,确定所述原始图片的配置化信息,包括:
响应于配置化信息填写请求,将所述配置化信息填写请求中携带的压缩信息更新至所述原始图片的附加信息中,得到所述原始图片的配置化信息;其中,所述压缩信息包括压缩比例。
4.根据权利要求1所述的方法,其特征在于,所述原始图片的存储格式包括如下至少一种:小体积格式、尺寸可调格式和颜色可调格式;所述小体积格式包括gif、jpeg和webp;所述尺寸可调格式包括svg;所述颜色可调格式包括pgn。
5.根据权利要求1所述的方法,其特征在于,获取目标网页在构建过程中所需的原始图片,包括:
获取目标网页中的文本信息;
根据所述文本信息从网页图片资源库中查找匹配度最高的网页图片,作为所述文本信息的原始图片。
6.根据权利要求1所述的方法,其特征在于,根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示,包括:
若检测到所述浏览器的版本号属于第一范围,则根据延迟属性标签对所述目标压缩图片进行加载展示;
若检测到所述浏览器的版本号属于第二范围,则根据图片监测结果对所述目标压缩图片进行加载展示;
若检测到所述浏览器的版本号属于第三范围,则根据页面监测结果对所述目标压缩图片进行加载展示。
7.根据权利要求6所述的方法,其特征在于,根据延迟属性标签对所述目标压缩图片进行加载展示,包括:
在目标压缩图片的初始属性信息中添加延迟属性标签;
检测待浏览页面进入网页可视区域的时间是否小于预设时间阈值;其中,所述待浏览页面中包括未加载的目标压缩图片;
若是,则加载所述目标压缩图片,用于将所述目标压缩图片展示在网页可视区域中。
8.根据权利要求6所述的方法,其特征在于,根据图片监测结果对所述目标压缩图片进行加载展示,包括:
通过图片监测接口监测网页资源中存储的所有未加载的目标压缩图片;
若监测到所有未加载的目标压缩图片中存在一个未加载的目标压缩图片的距离与网页可视区域下边界的距离小于预设距离阈值,则加载所述目标压缩图片。
9.根据权利要求8所述的方法,其特征在于,加载所述目标压缩图片,包括:
将所述目标压缩图片添加至所述网页可视区域中的图片存储位置;
将所述图片监测接口的运行状态从工作调整为暂停,并在检测到所述目标压缩图片已移出网页可视区域上边界之后,恢复所述图片监测接口的运行状态为工作。
10.根据权利要求6所述的方法,其特征在于,根据页面监测结果对所述目标压缩图片进行加载展示,包括:
通过页面监测接口监测是否存在页面滚动事件;
若存在,则判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片;
若具有,则加载所述移动页面中的目标压缩图片。
11.根据权利要求10所述的方法,其特征在于,加载所述移动页面中的目标压缩图片,包括:
将所述目标压缩图片添加至所述移动页面中的图片存储位置;
将所述页面监测接口的运行状态从工作调整为暂停,并在检测到所述移动页面中不再具有所述目标压缩图片之后,恢复所述页面监测接口的运行状态为工作。
12.根据权利要求10所述的方法,其特征在于,判断页面滚动事件的移动页面中是否具有未加载的目标压缩图片,包括:
检测页面滚动事件的移动页面中是否出现未加载图片的待展示标识;
若出现,则判定页面滚动事件的移动页面中具有未加载的目标压缩图片。
13.一种图片资源的处理装置,其特征在于,所述装置包括:
图片获取模块,用于获取目标网页在构建过程中所需的原始图片;并确定所述原始图片的配置化信息和所述原始图片的存储格式;
图片压缩模块,用于根据所述原始图片的配置化信息和所述原始图片的存储格式确定目标压缩图片;
版本号获取模块,用于若检测到浏览器触发的网页浏览事件,则获取所述浏览器的版本号;
图片加载模块,用于根据所述浏览器的版本号和预设加载策略对所述目标压缩图片进行加载展示。
14.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1~12中任一所述的图片资源的处理方法。
15.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1~12中任一所述的图片资源的处理方法。
CN202110335777.3A 2021-03-29 2021-03-29 图片资源的处理方法、装置、电子设备和介质 Pending CN112926009A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110335777.3A CN112926009A (zh) 2021-03-29 2021-03-29 图片资源的处理方法、装置、电子设备和介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110335777.3A CN112926009A (zh) 2021-03-29 2021-03-29 图片资源的处理方法、装置、电子设备和介质

Publications (1)

Publication Number Publication Date
CN112926009A true CN112926009A (zh) 2021-06-08

Family

ID=76176416

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110335777.3A Pending CN112926009A (zh) 2021-03-29 2021-03-29 图片资源的处理方法、装置、电子设备和介质

Country Status (1)

Country Link
CN (1) CN112926009A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114416209A (zh) * 2022-01-25 2022-04-29 爱集微咨询(厦门)有限公司 页面加载方法、装置和可读存储介质
CN114528057A (zh) * 2022-01-07 2022-05-24 南方电网深圳数字电网研究院有限公司 一种页面加载方法及装置
CN116257707A (zh) * 2023-01-04 2023-06-13 腾讯科技(深圳)有限公司 一种应用发布方法、装置、电子设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101324895A (zh) * 2008-07-24 2008-12-17 北大方正集团有限公司 加速图片在网页上显示的方法和***
US20140324954A1 (en) * 2011-10-27 2014-10-30 Tencent Technology (Shenzhen) Company Limited Method for browsing webpage picture and client device therefor
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质
CN110929197A (zh) * 2019-11-27 2020-03-27 杭州安恒信息技术股份有限公司 一种网页图片的预览加载方法和装置
WO2020199751A1 (zh) * 2019-04-03 2020-10-08 北京字节跳动网络技术有限公司 用于加载页面图片的方法、装置和电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101324895A (zh) * 2008-07-24 2008-12-17 北大方正集团有限公司 加速图片在网页上显示的方法和***
US20140324954A1 (en) * 2011-10-27 2014-10-30 Tencent Technology (Shenzhen) Company Limited Method for browsing webpage picture and client device therefor
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质
WO2020199751A1 (zh) * 2019-04-03 2020-10-08 北京字节跳动网络技术有限公司 用于加载页面图片的方法、装置和电子设备
CN110929197A (zh) * 2019-11-27 2020-03-27 杭州安恒信息技术股份有限公司 一种网页图片的预览加载方法和装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114528057A (zh) * 2022-01-07 2022-05-24 南方电网深圳数字电网研究院有限公司 一种页面加载方法及装置
CN114416209A (zh) * 2022-01-25 2022-04-29 爱集微咨询(厦门)有限公司 页面加载方法、装置和可读存储介质
CN116257707A (zh) * 2023-01-04 2023-06-13 腾讯科技(深圳)有限公司 一种应用发布方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN112926009A (zh) 图片资源的处理方法、装置、电子设备和介质
CN106294798B (zh) 一种基于缩略图的图像分享方法和终端
US8648858B1 (en) Hybrid text and image based encoding
US10423527B2 (en) Memory management and image display for mobile devices
CN107885848B (zh) 基于web技术的网页截屏方法
US20080013864A1 (en) Thumbnail image browsing method in an embedded system
US20100329642A1 (en) Dynamic Icons Associated with Remote Content
CN110929197A (zh) 一种网页图片的预览加载方法和装置
EP4198773A1 (en) Image processing method and apparatus, and computer readable storage medium
CN108322789B (zh) 一种网络图片显示方法、装置及移动终端
US20130227391A1 (en) Method and apparatus for displaying webpage
CN110968314A (zh) 一种页面生成方法及装置
CN108875085B (zh) 混合应用的图片处理方法、装置、计算机设备及存储介质
CN112752107B (zh) 网页图片预处理方法、***、存储介质及计算机设备
CN106557529B (zh) 页面跳转中的跳转页面展示方法和装置
CN109710783B (zh) 一种图片加载方法、装置、存储介质及服务器
CN117093386A (zh) 页面截图方法、装置、计算机设备和存储介质
CN112035205A (zh) 数据处理方法、装置、设备和存储介质
CN116578795A (zh) 网页页面的生成方法及装置、存储介质、电子设备
CN113051504B (zh) 文档预览方法、装置、设备、存储介质及程序产品
CN111447219B (zh) 图像显示方法及装置、存储介质、计算机设备
CN113032696A (zh) 一种页面图片的显示方法和显示装置
CN115167799B (zh) 可视化大屏的快速展示方法、装置、设备及存储介质
CN114827113B (zh) 一种网页访问方法及装置
CN112560402B (zh) 一种模型训练方法、装置及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination