CN108595698A - 图片加载方法、终端设备及介质 - Google Patents
图片加载方法、终端设备及介质 Download PDFInfo
- Publication number
- CN108595698A CN108595698A CN201810436277.7A CN201810436277A CN108595698A CN 108595698 A CN108595698 A CN 108595698A CN 201810436277 A CN201810436277 A CN 201810436277A CN 108595698 A CN108595698 A CN 108595698A
- Authority
- CN
- China
- Prior art keywords
- page
- picture
- parameter
- unit
- code
- 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
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 52
- 238000005457 optimization Methods 0.000 claims abstract description 126
- 238000012545 processing Methods 0.000 claims abstract description 22
- 238000000034 method Methods 0.000 claims abstract description 16
- 230000006870 function Effects 0.000 claims description 32
- 238000004590 computer program Methods 0.000 claims description 13
- 230000014509 gene expression Effects 0.000 claims description 13
- 230000036316 preload Effects 0.000 claims description 9
- 238000009434 installation Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000010485 coping Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000005611 electricity Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明适用于互联网技术领域，提供了一种图片加载方法、终端设备及介质，该方法包括：在页面应用启动时，运行预先安装的优化插件；通过优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；根据全局优化参数，对页面应用所包含的各个页面的页面代码进行优化处理；若在优化页面代码后的页面应用中检测到图片加载指令，则基于全局优化参数所匹配的图片优化模式，加载相应的图片。本发明保证了在加载用户所需的图像时，页面应用能够根据该图像所匹配的图片优化模式，快速下载并展示图像；在加快图片显示速度的同时，由于系统不需要同时缓存页面应用中每一页面的图像资源，因而避免了因缓存数据过多而导致性能消耗过大的问题出现。
Description
技术领域
本发明属于互联网技术领域，尤其涉及一种图片加载方法、终端设备及计算机可读存储介质。
背景技术
据统计分析显示，在网页中，图片数据的加载量已经占到了互联网数据加载总量的62％，也就是说，用户超过一半的流量和时间都耗在了图片的加载过程中。因此，从网页性能优化的角度来看，如何对图片的加载过程进行优化，其已成为了网页优化的热点和重点之一。
目前，图片显示的优化方式通常是通过图片缓存的方式来实现。具体地，当一图片加载完成后，在最近的一段时长内，均在内存中对该图片进行缓存，由此使得用户在再次请求加载同一图片时，能够从预先缓存的资源库中快速加载图片。然而，由于一个应用程序可能包含多个页面，若每一页面中的图片资源均需要缓存，则会导致缓存数据过多，增大内存消耗，从而会引发较大的性能问题。
发明内容
有鉴于此，本发明实施例提供了及一种图片加载方法、终端设备及计算机可读存储介质，以解决现有图片加载方法因缓存数据过多而导致性能消耗过大的问题。
本发明实施例的第一方面提供了一种图片加载方法，包括：
在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数；
通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式；
根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能；
若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
本发明实施例的第二方面提供了一种终端设备，包括存储器以及处理器，所述存储器存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如下步骤：
在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数；
通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式；
根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能；
若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
本发明实施例的第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如下步骤：
在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数；
通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式；
根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能；
若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
本发明实施例中，在页面应用启动时，通过运行一用于设置全局优化参数的优化插件，使得开发人员在输入各项全局优化参数后，能够自动地对各个页面的图像加载过程进行优化处理，实现对各个页面的页面代码的优化更新，保证了在加载用户所需的图像时，页面应用能够根据该图像所匹配的图片优化模式，快速下载并展示该图像。对于前端网页开发者而言，其无须逐一手动修改各个页面的代码便能达到图像优化显示的效果，故提高了图片显示的优化效率，降低了页面代码的维护难度。在加快图片显示速度的同时，由于本发明实施例中，系统不需要同时缓存页面应用中每一页面的图像资源，因而避免了因缓存数据过多而导致性能消耗过大的问题出现。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的图片加载方法的实现流程图；
图2是本发明另一实施例提供的图片加载方法的实现流程图；
图3是本发明实施例提供的图片加载方法S101的具体实现流程图；
图4是本发明实施例提供的图片加载方法S103的具体实现流程图；
图5是本发明实施例提供的图片加载方法S104的实现流程图；
图6是本发明实施例提供的图片加载装置的结构框图；
图7是本发明实施例提供的终端设备的示意图。
具体实施方式
以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。
为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。
图1示出了本发明实施例提供的图片加载方法的实现流程，该方法流程包括步骤S101至S104。各步骤的具体实现原理如下：
S101：在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数。
本发明实施例中，页面应用是指包含有多个前端开发页面的应用。其中，上述应用是指运行于各类终端设备上的应用程序，上述终端设备包括但不限于手机、平板电脑、智能电视以及服务器等。当在页面应用中检测到不同的操控指令时，页面应用将展示不同的各个前端开发页面。
若在终端设备上接收到用户对某一页面应用的应用图标发出选取指令，则启动该页面应用，此时，根据预先关联的插件信息，调用安装于同一终端设备上的优化插件。上述优化插件用于提供全局优化参数的输入接口。全局优化参数是指与页面应用中所有前端开发页面均具有关联关系的页面优化参数。全局优化参数例如可以是前端开发页面中，其所包含的各个待加载图像所对应的缓存地址、加载触发条件以及图像标签的标签属性等。
作为本发明的另一个实施例，如图2所示，在上述S101之前，还包括：
S105：获取多个预设的功能代码模块，每一所述功能代码模块与一种所述图片优化模式相对应。
S106：根据接收到的编译指令，对各个所述功能代码模块进行编译处理，得到基于自动化构建工具gulp的所述优化插件。
S107：在所述页面应用所属的运行环境中，安装所述优化插件。
本发明实施例中，图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式。域名系统解析模式是指，在检测到页面应用中待加载图像所链接的域名地址时，对该域名地址进行预先解析，并缓存该解析得到的互联网协议(InternetProtocol，IP)地址；图片预加载模式是指，根据待加载图像所链接的地址，预先将图片下载至终端设备进行存储；图像标签定位模式是指，在前端开发页面的图像标签中，加入srcset等属性参数。
本发明实施例中，获取页面应用开发人员所录入的程序代码，以通过多段程序代码来实现上述每一种类型的图片优化模式。将用于实现上述每一类型的图片优化模式的多段程序代码输出为一功能代码模块，因此，每一功能代码模块与一图片优化模式对应。
由于上述各个功能代码模块均为页面应用开发人员在集成开发环境中所输入的源代码，因此，本发明实施例中，触发集成开发环境中的编译事件，以对各个功能代码模块进行编译处理。若编译过程中检测到代码错误，则发出错误提示信息，以使页面应用开发人员基于该错误提示信息来进行源代码修复操作后，再次返回对各个功能代码模块进行编译处理的操作，直至输出基于gulp的优化插件。
在当前页面应用所属的终端设备，即页面应用所属的运行环境中，安装该基于gulp的优化插件。
本发明实施例中，通过获取预设的多个功能代码模块，并使每一功能代码模块与一图片优化模式对应，使得最终所编译得到的优化插件能够同时集成多种图片优化模式，由此保证了在将优化插件安装于页面应用所属的运行环境时，能够直接将多种图片优化模式应用于该页面应用，使得页面应用能够在不同的触发条件之下使用不同的图片优化模式，避免了单一优化模式而导致系统性能问题的出现。例如，不会因统一使用图片预加载模式而导致图片缓存数据过多的问题出现。因此，本发明实施例中，在加快了图片显示速度的同时，还提高了终端设备的稳定性。
作为本发明的一个实施例，图3示出了本发明实施例提供的图片加载方法S101的具体实现流程，详述如下：
S1011：若接收到页面应用启动指令，则启动所述页面应用的主线程。
S1012：在所述主线程的启动过程中，检测是否存在携带有gulp标签的所述优化插件。
S1013：若存在携带有gulp标签的所述优化插件，则在所述页面应用中，调用所述优化插件。
本发明实施例中，当上述基于gulp的优化插件编译安装完成时，为了区分该优化插件与终端设备中所安装的其他各类型插件，在优化插件所包含的属性信息中，添加gulp标签。所述gulp标签用于标记用于执行图片加载优化操作的插件。
在接收到用户对终端设备上的任一页面应用所发出的启动指令时，控制该页面应用的主线程进行启动。同时，通过该主线程，读取终端设备所安装的各项插件的属性信息，并检测其中是否包含gulp标签。
若检测到包含gulp标签的属性信息，则将该属性信息所对应的插件确定为当前页面应用的优化插件，并启动该优化插件。
若未检测到包含gulp标签的属性信息，则在运行页面应用后，根据用户发出的操作指令，以默认模式加载所需的各项图片。其中，默认模式表示页面代码未执行优化前所使用的图片加载模式。
优选地，若未检测到包含gulp标签的属性信息，则在运行页面应用后，每隔预设的时间间隔，控制该页面应用的主线程返回执行上述检测是否存在携带有gulp标签的优化插件的步骤。若存在携带有gulp标签的优化插件，则在页面应用中，调用优化插件。
本发明实施例中，通过在优化插件中添加gulp标签，使得当前终端设备所启动的页面应用能够准确、快速地定位出能够关联应用的优化插件，由此也提高了图片显示的优化效率；由于未携带gulp标签的插件不会在当前页面应用中进行启动操作，故保证了仅有图片优化效果的优化插件才会被调用，不具备图片优化效果的其他插件不会被错误调用，从而避免了因启动无效插件而增加了终端设备的性能消耗的问题出现，因此，在一定程度上提高了页面应用的运行效率。
S102：通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式。
本发明实施例中，在启动优化插件后，生成全局参数设置页面。全局参数设置页面包含有各个图片优化模式所分别对应的优化参数输入栏。页面应用的使用用户或者页面应用开发人员可在该全局参数设置页面中输入自定义的全局优化参数。为了便于描述，将页面应用的使用用户或者页面应用开发人员统称为所述用户。用户可选择性地输入各项全局优化参数。
优选地，各项全局优化参数的属性类型为必填属性。即，用户必须需要输入每一图片优化模式所对应的各项全局优化参数。
S103：根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能。
在未优化页面代码之前，页面应用在接收到图片加载指令时，仅依赖于初始时刻的页面代码来执行图片的实时请求及加载显示，降低了图片的加载效率。本发明实施例中，在获取到用户所输入的上述全局优化参数后，若检测到用户发出的优化参数确认指令，则根据接收到的各项全局优化参数，对页面应用中各个页面的页面代码进行优化处理，由此实现了在原本不具备图片优化加载功能的页面应用中，动态地加入了图片优化加载的功能。
可选地，若检测到的各项全局优化参数均为非空值，则根据预设的图片优化模式的优先级高低，对各项图片优化模式进行排序，得到优化模式序列。对页面应用所包含的任一页面，获取优化模式序列中指针所实时指向的一图片优化模式，并将该图片优化模式所对应的全局优化参数应用至当前页面，以对该页面的页面代码进行优化处理。其中，指针在初始状态下所指向的图片优化模式为优先级最高的图片优化模式，且当一页面的页面代码优化完成时，将该指针指向优化模式序列中的下一图片优化模式。另外，在指针指向优先级最低的图片优化模式之后，对该指针进行循环移动操作，以使该指针指向优化模式序列中的第一项图片优化模式，即，优先级最高的图片优化模式，直至页面应用所包含的各个页面的页面代码均优化完成时，停止移动上述指针的位置。
可选地，若检测到全局参数设置页面中存在属性值为空值的全局优化参数，则确定其中全局优化参数完善度最高的一类图片优化模式。根据该图片优化模式，对各个页面的页面代码进行优化处理。
S104：若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
本发明实施例中，当页面应用优化完成时，在当前显示页面发出优化完成提示信息。此时，接收用户在页面应用中所发出的图片加载指令。例如，在页面应用所展示的页面跳转控件中，接收用户发出的选取指令。此时，加载该页面跳转控件所对应的跳转页面，并基于已优化完成的该跳转页面以及该跳转页面所应用的图片优化模式，显示跳转页面中所包含的各个图片。
优选地，在页面应用优化完成时，将页面代码更新后的该页面应用的资源数据包同步至应用发布服务器，并使该应用发布服务器将资源数据包推送至已安装该页面应用的其他终端设备，由此实现对已发布的各个页面应用的强制更新。
示例性地，在上述页面应用的优化过程中，若跳转页面所应用的图片优化模式为图片预加载模式，则在加载跳转页面中所包含的各个图片时，从预设的本地图片库中，获取并显示所需的各个图片；若跳转页面所应用的图片优化模式为域名系统预解析模式，则根据每一图片所关联的域名地址，从本地域名解析库中获取该域名地址所对应的IP地址，并向该IP地址所属的远程服务器发出图片下载请求，以在下载完成后，显示跳转页面中的各个图片。
本发明实施例中，在页面应用启动时，通过运行一用于设置全局优化参数的优化插件，使得开发人员在输入各项全局优化参数后，能够自动地对各个页面的图像加载过程进行优化处理，实现对各个页面的页面代码的优化更新，保证了在加载用户所需的图像时，页面应用能够根据该图像所匹配的图片优化模式，快速下载并展示该图像。对于前端网页开发者而言，其无须逐一手动修改各个页面的代码便能达到图像优化显示的效果，故提高了图片显示的优化效率，降低了页面代码的维护难度。在加快图片显示速度的同时，由于本发明实施例中，系统不需要同时缓存页面应用中每一页面的图像资源，因而避免了因缓存数据过多而导致性能消耗过大的问题出现。
作为本发明的一个实施例，若当前页面所需执行的优化方式为图片标签定位模式，则图4示出了本发明实施例提供的图片加载方法S103的具体实现流程，详述如下：
S1031：获取预设的与图像标签匹配的正则表达式。
图像标签为页面代码中的一类超文本标记语言(HyperText Markup Language，HTML)标签，具体为<img>标签。本发明实施例中，获取预设的与图片标签匹配的正则表达式，上述正则表达式用于从页面代码中查找出各个<img>标签，其根据用户的输入指令来确定。示例性地，该正则表达式例如可以是“*<img*”。
本发明实施例中，若当前页面所需执行的优化方式为图片标签定位模式，则在全局参数设置页面中，读取用户所输入的多链接参数。上述多链接参数与一图片对应，其用于表示该图片所对应的至少两个以上的加载链接。其中，多链接参数中包含有用于表示多个不同的图片像素密度的标识符。例如，多链接参数可以是“/i/mm-width-128px.jpg、/k/mm-width-256px.jpg”，则上述“128px”以及“256px”即为图片像素密度的标识符。
S1032：基于所述正则表达式，对存在于页面代码中的各个所述图像标签进行定位，所述页面代码为所述页面应用的前端开发代码。
本发明实施例中，根据图像标签所匹配的正则表达式，查找当前的页面代码中是否存在图像标签。具体地，依次读取页面代码中的各个字符串，判断该字符串是否满足上述正则表达式。若该字符串满足上述正则表达式，则确定该字符串中存在一图像标签，并将该图像标签的定位确定为该字符串所属的位置。如此类推，直至确定出页面代码中所有图像标签的定位。
S1033：在定位得到的各个所述图像标签中，确定出所述多链接参数所关联的所述图像标签，并将所述多链接参数添加至该图像标签的标签属性中。
本发明实施例中，对确定出的各个图像标签所属的代码段进行依序展示，由此使得用户能够对代码段进行识读后，获知当前的图像标签所关联的待加载图像。若当前所展示图像标签的代码段为用户所需优化的待加载图像所属的代码段，则用户发出标签确定指令，此时，将上述多链接参数添加至该图像标签的标签属性中。
示例性地，若多链接参数为“small.jpg 640w 1x”以及“small-hd.jpg 640w 2x”，则将当前确定出的<img>标签的标签属性更新为<img src＝"small.GIF"srcset＝"small.jpg 640w 1x,small-hd.jpg 640w 2x">。
作为本发明的一个实施例，在上一实施例的基础之上，图4示出了本发明实施例提供的图片加载方法S104的具体实现流程，详述如下：
S1041：在优化页面代码后的所述页面应用中，若检测到对所述多链接参数关联的所述图像的图片加载指令，则获取当前时刻终端显示界面的屏幕参数，所述屏幕参数包括屏幕像素密度。
本发明实施例中，在页面优化完成后，若检测到用户在该页面中发出的图片加载指令，且该图片加载指令所对应的图像标签中存在多链接参数，则根据终端设备所提供的参数调用接口，获取当前时刻终端显示界面的屏幕参数。屏幕参数包括但不限于屏幕像素密度、屏幕长宽值以及屏幕分辨率等。
S1042：读取所述多链接参数所包含的各个图像链接，并从中确定出与所述屏幕像素密度对应的所述图像链接；其中，每一所述图像链接所指示的图片像素密度与该图像链接所对应的所述屏幕像素密度成正比。
在待加载图片的图像标签的标签属性中，每一图像链接均设置有对应的一个屏幕像素密度，且图像链接所指示的图片的图片像素密度与该图像链接所对应的屏幕像素密度成正比。
例如，若一图像标签的标签属性为“<img src＝"/r/small.GIF"srcset＝"/r/small.jpg 640w 1x,/r/small-hd.jpg 640w 2x,/r/large.jpg 1x,/r/large-hd.jpg 2x">”，则"/r/small.GIF"这一图像链接的屏幕像素密度为1，“/r/small-hd.jpg”这一图像链接的屏幕像素密度为2。
根据当前终端显示界面的屏幕像素密度，从标签属性中确定出与该屏幕像素密度对应的图像链接。
S1043：根据确定出的所述图像链接，加载相应的图片。
本发明实施例中，不同的图像链接指向不同的图像资源。根据确定出的图像链接，获取该图像链接的IP地址，以将该IP地址作为目标地址后，发出图片下载请求，并对对端所返回的图片进行显示。
示例性地，若检测到屏幕密度为1，则从“/r/small.jpg”这一路径下加载图像；若检测到屏幕密度为2，则从“/r/small-hd.jpg”这一路径下加载图像。
本发明实施例中，通过获取用户输入的多链接参数，并定位出页面代码中所存在的各个图像标签，使得在页面应用开发完成后，用户也可以将多链接参数动态添加至所需优化的图像标签中，保证了在不同的终端应用场景之下，能够从标签属性中自动选取匹配的图像加载路径，实现了快速显示用户所需的图像；同时，由于每一图像链接所指示的图片像素密度与该图像链接所对应的屏幕像素密度成正比，故避免了图像像素与屏幕密度不匹配而导致了图片加载数据量浪费的问题出现，因而也提高了带宽使用率。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
对应于上文实施例所述的图片加载方法，图6示出了本发明实施例提供的图片加载装置的结构框图。为了便于说明，仅示出了与本实施例相关的部分。
参照图6，该装置包括：
运行单元61，用于在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数。
第一获取单元62，用于通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式。
优化单元63，用于根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能。
加载单元64，用于若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
可选地，所述图片加载装置还包括：
第二获取单元，用于获取多个预设的功能代码模块，每一所述功能代码模块与一种所述图片优化模式相对应。
编译单元，用于根据接收到的编译指令，对各个所述功能代码模块进行编译处理，得到基于自动化构建工具gulp的所述优化插件。
安装单元，用于在所述页面应用所属的运行环境中，安装所述优化插件。
可选地，若用户输入的所述全局优化参数包括任一图像的多链接参数，则所述优化单元63包括：
第一获取子单元，用于获取预设的与图像标签匹配的正则表达式。
定位子单元，用于基于所述正则表达式，对存在于页面代码中的各个所述图像标签进行定位，所述页面代码为所述页面应用的前端开发代码。
添加子单元，用于在定位得到的各个所述图像标签中，确定出所述多链接参数所关联的所述图像标签，并将所述多链接参数添加至该图像标签的标签属性中。
可选地，所述加载单元64包括：
第二获取子单元，用于在优化页面代码后的所述页面应用中，若检测到对所述多链接参数关联的所述图像的图片加载指令，则获取当前时刻终端显示界面的屏幕参数，所述屏幕参数包括屏幕像素密度。
读取子单元，用于读取所述多链接参数所包含的各个图像链接，并从中确定出与所述屏幕像素密度对应的所述图像链接；其中，每一所述图像链接所指示的图片像素密度与该图像链接所对应的所述屏幕像素密度成正比。
加载子单元，用于根据确定出的所述图像链接，加载相应的图片。
可选地，所述运行单元61包括：
启动子单元，用于若接收到页面应用启动指令，则启动所述页面应用的主线程。
检测子单元，用于在所述主线程的启动过程中，检测是否存在携带有gulp标签的所述优化插件。
调用子单元，用于若存在携带有gulp标签的所述优化插件，则在所述页面应用中，调用所述优化插件。
图7是本发明一实施例提供的终端设备的示意图。如图7所示，该实施例的终端设备7包括：处理器70以及存储器71，所述存储器71中存储有可在所述处理器70上运行的计算机程序72，例如图片加载程序。所述处理器70执行所述计算机程序72时实现上述各个图片加载方法实施例中的步骤，例如图1所示的步骤101至104。或者，所述处理器70执行所述计算机程序72时实现上述各装置实施例中各模块/单元的功能，例如图6所示单元61至64的功能。
示例性的，所述计算机程序72可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器71中，并由所述处理器70执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序72在所述终端设备7中的执行过程。
所述终端设备7可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备可包括，但不仅限于，处理器70、存储器71。本领域技术人员可以理解，图7仅仅是终端设备7的示例，并不构成对终端设备7的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器70可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器71可以是所述终端设备7的内部存储单元，例如终端设备7的硬盘或内存。所述存储器71也可以是所述终端设备7的外部存储设备，例如所述终端设备7上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器71还可以既包括所述终端设备7的内部存储单元也包括外部存储设备。所述存储器71用于存储所述计算机程序以及所述终端设备所需的其他程序和数据。所述存储器71还可以用于暂时地存储已经输出或者将要输出的数据。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。
Claims (10)
1.一种图片加载方法，其特征在于，包括：
在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数；
通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式；
根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能；
若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
2.如权利要求1所述的图片加载方法，其特征在于，在所述在页面应用启动时，运行预先安装的优化插件之前，还包括：
获取多个预设的功能代码模块，每一所述功能代码模块与一种所述图片优化模式相对应；
根据接收到的编译指令，对各个所述功能代码模块进行编译处理，得到基于自动化构建工具gulp的所述优化插件；
在所述页面应用所属的运行环境中，安装所述优化插件。
3.如权利要求1所述的图片加载方法，其特征在于，若用户输入的所述全局优化参数包括任一图像的多链接参数，则所述根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能，包括：
获取预设的与图像标签匹配的正则表达式；
基于所述正则表达式，对存在于页面代码中的各个所述图像标签进行定位，所述页面代码为所述页面应用的前端开发代码；
在定位得到的各个所述图像标签中，确定出所述多链接参数所关联的所述图像标签，并将所述多链接参数添加至该图像标签的标签属性中。
4.如权利要求3所述的图片加载方法，其特征在于，所述若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片，包括：
在优化页面代码后的所述页面应用中，若检测到对所述多链接参数关联的所述图像的图片加载指令，则获取当前时刻终端显示界面的屏幕参数，所述屏幕参数包括屏幕像素密度；
读取所述多链接参数所包含的各个图像链接，并从中确定出与所述屏幕像素密度对应的所述图像链接；其中，每一所述图像链接所指示的图片像素密度与该图像链接所对应的所述屏幕像素密度成正比；
根据确定出的所述图像链接，加载相应的图片。
5.如权利要求1所述的图片加载方法，其特征在于，所述在页面应用启动时，运行预先安装的优化插件，包括：
若接收到页面应用启动指令，则启动所述页面应用的主线程；
在所述主线程的启动过程中，检测是否存在携带有gulp标签的所述优化插件；
若存在携带有gulp标签的所述优化插件，则在所述页面应用中，调用所述优化插件。
6.一种终端设备，包括存储器以及处理器，所述存储器存储有可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如下步骤：
在页面应用启动时，运行预先安装的优化插件，所述优化插件用于设置所述页面应用的全局优化参数；
通过所述优化插件，获取用户所输入的与至少一种图片优化模式关联的全局优化参数；所述图片优化模式包括域名系统预解析模式、图像标签定位模式以及图片预加载模式；
根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能；
若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片。
7.如权利要求6所述的终端设备，其特征在于，所述处理器执行所述计算机程序时，还实现如下步骤：
获取多个预设的功能代码模块，每一所述功能代码模块与一种所述图片优化模式相对应；
根据接收到的编译指令，对各个所述功能代码模块进行编译处理，得到基于自动化构建工具gulp的所述优化插件；
在所述页面应用所属的运行环境中，安装所述优化插件。
8.如权利要求6所述的终端设备，其特征在于，若用户输入的所述全局优化参数包括任一图像的多链接参数，则所述根据所述全局优化参数，对所述页面应用所包含的各个页面的页面代码进行优化处理，以在所述页面应用中添加图片优化加载功能，包括：
获取预设的与图像标签匹配的正则表达式；
基于所述正则表达式，对存在于页面代码中的各个所述图像标签进行定位，所述页面代码为所述页面应用的前端开发代码；
在定位得到的各个所述图像标签中，确定出所述多链接参数所关联的所述图像标签，并将所述多链接参数添加至该图像标签的标签属性中。
9.如权利要求8所述的终端设备，其特征在于，所述若在优化页面代码后的所述页面应用中检测到图片加载指令，则基于所述全局优化参数所匹配的所述图片优化模式，加载相应的图片，包括：
在优化页面代码后的所述页面应用中，若检测到对所述多链接参数关联的所述图像的图片加载指令，则获取当前时刻终端显示界面的屏幕参数，所述屏幕参数包括屏幕像素密度；
读取所述多链接参数所包含的各个图像链接，并从中确定出与所述屏幕像素密度对应的所述图像链接；其中，每一所述图像链接所指示的图片像素密度与该图像链接所对应的所述屏幕像素密度成正比；
根据确定出的所述图像链接，加载相应的图片。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810436277.7A CN108595698A (zh) | 2018-05-09 | 2018-05-09 | 图片加载方法、终端设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810436277.7A CN108595698A (zh) | 2018-05-09 | 2018-05-09 | 图片加载方法、终端设备及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108595698A true CN108595698A (zh) | 2018-09-28 |
Family
ID=63636414
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810436277.7A Pending CN108595698A (zh) | 2018-05-09 | 2018-05-09 | 图片加载方法、终端设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108595698A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109859282A (zh) * | 2019-02-12 | 2019-06-07 | 深圳市技达信息技术有限公司 | 访问图片的方法 |
| CN110175053A (zh) * | 2019-04-24 | 2019-08-27 | 阿里巴巴集团控股有限公司 | 图片加载方法及装置 |
| CN111475748A (zh) * | 2019-01-24 | 2020-07-31 | 阿里巴巴集团控股有限公司 | 图片的展示方法及装置 |
| CN111597102A (zh) * | 2019-02-21 | 2020-08-28 | 北京京东尚科信息技术有限公司 | 一种页面性能的测试方法、终端及存储介质 |
| CN114245152A (zh) * | 2021-11-03 | 2022-03-25 | 武汉斗鱼鱼乐网络科技有限公司 | 标识图片加载方法、装置、存储介质及电子设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140344663A1 (en) * | 2013-05-15 | 2014-11-20 | Christopher Stephen Joel | Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service |
| CN105550245A (zh) * | 2015-12-08 | 2016-05-04 | 四川长虹电器股份有限公司 | 基于Android平台网络图片加载及缓存的优化系统及方法 |
| CN107832375A (zh) * | 2017-10-30 | 2018-03-23 | 福建中金在线信息科技有限公司 | 图片显示的控制方法、终端以及服务器 |
-
2018
- 2018-05-09 CN CN201810436277.7A patent/CN108595698A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140344663A1 (en) * | 2013-05-15 | 2014-11-20 | Christopher Stephen Joel | Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service |
| CN105550245A (zh) * | 2015-12-08 | 2016-05-04 | 四川长虹电器股份有限公司 | 基于Android平台网络图片加载及缓存的优化系统及方法 |
| CN107832375A (zh) * | 2017-10-30 | 2018-03-23 | 福建中金在线信息科技有限公司 | 图片显示的控制方法、终端以及服务器 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475748A (zh) * | 2019-01-24 | 2020-07-31 | 阿里巴巴集团控股有限公司 | 图片的展示方法及装置 |
| CN111475748B (zh) * | 2019-01-24 | 2024-04-12 | 阿里巴巴集团控股有限公司 | 图片的展示方法及装置 |
| CN109859282A (zh) * | 2019-02-12 | 2019-06-07 | 深圳市技达信息技术有限公司 | 访问图片的方法 |
| CN111597102A (zh) * | 2019-02-21 | 2020-08-28 | 北京京东尚科信息技术有限公司 | 一种页面性能的测试方法、终端及存储介质 |
| CN110175053A (zh) * | 2019-04-24 | 2019-08-27 | 阿里巴巴集团控股有限公司 | 图片加载方法及装置 |
| CN110175053B (zh) * | 2019-04-24 | 2023-10-27 | 创新先进技术有限公司 | 图片加载方法及装置 |
| CN114245152A (zh) * | 2021-11-03 | 2022-03-25 | 武汉斗鱼鱼乐网络科技有限公司 | 标识图片加载方法、装置、存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108595698A (zh) | 图片加载方法、终端设备及介质 | |
| CN111273898B (zh) | web前端代码自动化构建方法、系统及存储介质 | |
| US10650067B2 (en) | Cloud-enabled architecture for on-demand native application crawling | |
| US11706331B2 (en) | Information processing method and apparatus, storage medium, and electronic device | |
| CN100380318C (zh) | 在客户机-服务器通信中处理增量数据的方法和计算机系统 | |
| US9483449B1 (en) | Optimizing page output through run-time reordering of page content | |
| CN109634598A (zh) | 一种页面显示方法、装置、设备及存储介质 | |
| CN109358936A (zh) | 信息处理方法、装置、存储介质、电子设备及系统 | |
| US20040201618A1 (en) | Streaming of real-time data to a browser | |
| US20100306738A1 (en) | Templating system and method for updating content in real time | |
| US11474796B1 (en) | Build system for distributed applications | |
| US9749440B2 (en) | Systems and methods for hosted application marketplaces | |
| EP4280048A1 (en) | Page rendering method and apparatus, electronic device, computer-readable storage medium, and computer program product | |
| US20180267781A1 (en) | Code generation for isomorphic data fetching | |
| CN102368249B (zh) | 一种ie内核浏览器的页面下载控制方法和系统 | |
| CN103530338A (zh) | 在计算设备上进行页面渲染的框架及生成页面的方法 | |
| CN113703893B (zh) | 一种页面渲染方法、装置、终端及存储介质 | |
| Frederick et al. | Beginning smartphone web development | |
| CN103294717A (zh) | 一种基于双内核浏览器的网页打开方法和装置 | |
| CN108319474B (zh) | 一种页面信息生成方法、装置和设备 | |
| US20140237296A1 (en) | Architecture for remote access to content state | |
| US20210334113A1 (en) | Method and device for lazy loading of js scripts | |
| TW201525740A (zh) | 網頁顯示方法和裝置及電腦可讀取儲存介質 | |
| CN112395437B (zh) | 一种3d模型的加载方法、装置、电子设备及存储介质 | |
| CN109240673A (zh) | 一种基于react-native的视图动态加载更新方法及系统 |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20180928 |