CN110059281B - 图片显示方法、装置、终端及计算机可读存储介质 - Google Patents

图片显示方法、装置、终端及计算机可读存储介质 Download PDF

Info

Publication number
CN110059281B
CN110059281B CN201910290739.3A CN201910290739A CN110059281B CN 110059281 B CN110059281 B CN 110059281B CN 201910290739 A CN201910290739 A CN 201910290739A CN 110059281 B CN110059281 B CN 110059281B
Authority
CN
China
Prior art keywords
picture
address
array
webpage
terminal
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.)
Active
Application number
CN201910290739.3A
Other languages
English (en)
Other versions
CN110059281A (zh
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910290739.3A priority Critical patent/CN110059281B/zh
Publication of CN110059281A publication Critical patent/CN110059281A/zh
Application granted granted Critical
Publication of CN110059281B publication Critical patent/CN110059281B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • 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
    • G06F16/972Access to data in other repository systems, e.g. legacy data or dynamic Web page generation

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

图片显示方法、装置、终端及计算机可读存储介质
技术领域
本发明涉及网络技术领域,特别涉及一种图片显示方法、装置、终端及计算机可读存储介质。
背景技术
随着网络技术的发展,用户可以通过终端来浏览网页内的图片,终端可以使用图片查看器显示网页上的图片,以便用户浏览,图片查看器在显示网页上的图片之前,该终端可以在网页上显示图片。
目前,图片显示可以是如下过程:在网页滚动过程中,当图片的占位图进入可视区后,终端可以通过浏览器内核将该图片的img(image,图像)标签中src(source,源文件)属性的内容更新为该图片的图片地址,也即是,该图片的URL(uniform resource locator,统一资源定位符)地址,该终端根据该URL地址,获取该图片的图片数据,显示该图片的原图。
然而,一个网页上可能需要显示大量的图片,在上述图片显示过程中,由于该网页内的未加载图片的src属性还未更新,那么,当通过图片查看器显示该网页上所有图片时,只能显示src属性已经更新的图片,也即是,已加载的图片,所以导致无法通过图片查看器显示该网页内的未加载图片。
发明内容
本发明实施例提供了一种图片显示方法、装置、终端及计算机可读存储介质,能够解决终端无法通过图片查看器显示该网页内的未加载图片的问题。所述技术方案如下:
一方面,提供了一种图片显示方法,所述方法包括:
接收对网页的图片查看指令,所述图片查看指令用于指示通过图片查看器显示所述网页内的至少一个图片;
基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸;
根据所述至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,所述第一数组包括需要进行预加载再显示的图片地址,所述第二数组包括能够直接显示的图片地址;
根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片。
另一方面,提供了一种图片显示装置,所述装置包括:
接收模块,用于接收对网页的图片查看指令,所述图片查看指令用于指示通过图片查看器显示所述网页内的至少一个图片;
获取模块,用于基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸;
确定模块,用于根据所述至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,所述第一数组包括需要进行预加载再显示的图片地址,所述第二数组包括能够直接显示的图片地址;
显示模块,用于根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片。
另一方面,提供了一种终端,该终端包括:处理器;用于存放计算机程序的存储器;其中,该处理器用于执行存储器上所存放的计算机程序,实现上述图片显示方法所执行的操作。
另一方面,提供了一种计算机可读存储介质,该计算机可读存储介质内存储有计算机程序,该计算机程序被处理器执行时实现上述图片显示方法所执行的操作。
本发明实施例提供的技术方案带来的有益效果是:
通过网页内至少一个图片的设备显示尺寸和原始尺寸,对该至少一个图片的图片地址进行分组,得到包括需要进行预加载再显示的图片地址的第一数组和包括能够直接显示的图片地址的第二数组,由于第一数组内的图片地址为预加载图片的图片地址,且第二数组内的图片地址为加载中图片的图片地址或已加载图片的图片地址,而预加载图片和加载中图片均为网页内的未加载图片,那么,当终端根据该第一数组和第二数组中的图片地址,在该图片查看器中显示该网页内的多个图片时,可以实现通过图片查看器显示网页内的未加载图片,进而可以解决无法通过图片查看器显示网页内的未加载图片的问题。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种实施环境的示意图;
图2是本发明实施例提供的一种网页显示方法的流程图;
图3是本发明实施例提供的一种网页显示方法的流程图;
图4是本发明实施例提供的一种第一数组确定方法的流程图;
图5是本发明实施例提供的一种第一数组确定方法的流程图;
图6是本发明实施例提供的一种第二数组确定方法的流程图;
图7是本发明实施例提供的一种第二数组确定方法的流程图;
图8是本发明实施例提供的一种缩略图过滤方法的流程图;
图9是本发明实施例提供的一种缩略图过滤方法的流程图;
图10是本发明实施例提供的一种图片显示对比图;
图11是本发明实施例提供的一种图片显示对比图;
图12是本发明实施例提供的一种图片显示方法的流程图;
图13是本发明实施例提供的一种网页显示装置结构示意图;
图14是本发明实施例提供的一种终端的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明实施方式作进一步地详细描述。
在此,对本文中出现的一些名词如下解释:
网页跳转:将两个网页进行切换的过程,例如,终端上目前在显示界面上显示网页1,当终端在显示界面上将网页1切换至网页2,此时显示界面上显示网页2,在这个过程中,可以认为该终端完成了一次网页跳转。
设备显示尺寸:终端在显示图片时图片的尺寸,可以包括该终端显示该图片时的图片的高度和图片的宽度。
原始尺寸:图片原始状态下未经缩放的尺寸,也即是图片的真实尺寸。
普通图片:父节点不是a(anchor,锚)标签的图片,也即是不具有超链接功能的图片。
已加载图片:已经在网页上显示的图片,可以包括网页上正处于显示状态的图片以及网页上已显示过但是目前未处于显示状态的图片。
未加载图片:还未在网页上进行过显示的图片。当终端使用懒加载技术加载网页内的图片时,未加载图片包括预加载图片和加载中图片,其中,预加载图片为需要提前进行加载的图片,终端无法获取到预加载图片的设备显示尺寸或原图尺寸,加载中图片为无需提前进行加载且正在加载中但是还未在网页上显示的图片,终端可以获取到预加载图片的设备显示尺寸和原始尺寸。
图片地址:存储图片原图数据的地址,也即是,终端可以在图片地址内下载图片的原图。该图片地址可以用URL(uniform resource locator,统一资源定位符)来表示。
目标地址:存储在图片的img标签中src属性内的地址。当图片为未加载图片时,该图片的目标地址为占位图的图片地址,当图片为已加载图片时,该图片的目标地址为该图片的图片地址,其中,占位图为网页上未加载完或者加载失败时,网页上所显示的图片。
网页的已下载数据:终端所存储的与网页相关的数据,这部分数据可以是基于用户对网页的浏览进度从服务器上下载得到。
目标时长:为任一预设的时长,该目标时长可以是用于衡量网页内是否发生网页调整的时长。
为了便于理解本发明中图片显示的过程,在此先对本发明的实施环境进行描述,参见图1,图1是本发明实施例提供的一种实施环境的示意图。该实施环境包括终端101和服务器102。该终端101可以通过浏览器内核显示网页,终端101通过网络向服务器102发送对网页地址的访问请求,并基于该访问请求从服务器102中获取该网页地址对应的网页数据,终端101中的浏览器内核基于获取到的网页数据,来显示网页。该终端101可以具有显示界面,该显示界面可以显示服务器102所提供的网页,以供用户浏览,例如,该终端101可以通过图片查看器查看网页内的图片,该图片查看器用于提供查看网页内的图片的服务,具体地,终端在图片的img标签内获取图片地址,然后,基于图片地址下载图片,最后通过图片查看器显示下载的图片。该终端101可以是手机或者笔记本电脑等电子设备,本发明实施例对该终端不做具体限定。
为了进一步体现终端通过图片查看器显示网页上的图片的过程,本发明实施例提供了如图2所示的一种图片显示方法的流程图。该实施例包括以下步骤:
201、终端接收对网页的图片查看指令,该图片查看指令用于指示通过图片查看器显示该网页内的至少一个图片。
该网页为用户基于该终端正在查看的任一网页,该网页内的至少一个图片包括该网页内已加载图片和未加载图片。
该网页查看指令可以由用户的操作信号来触发,该操作信号可以是鼠标的点击操作,例如,右键单击,左键双击等,该操作信号还可以是点击该终端键盘上预设的快捷键的操作,该终端的键盘可以是该终端外接的键盘,还可以是该终端上显示的虚拟键盘,该操作信号还可以是用户触摸图片的操作,例如,当终端检测到用户触摸到该网页内的任一图片时,触发该网页查看指令。本发明实施例对该操作信号不做具体限定。
202、该终端基于该网页的已下载数据,获取该至少一个图片的设备显示尺寸和原始尺寸。
该已下载数据可以包括该网页内的至少一个图片的img标签以及关于该至少一个图片的其他信息,还可以包括该网页内的视频数据以及文本数据等,本发明实施例对该已下载数据的具体内容不做限定。
图片的img标签内存储有图片的原始尺寸,终端可以在该已下载数据中,获取该至少一个图片的img标签,并从每个img标签中获取每个图片的原始尺寸,进而该终端可以获取到该至少一个图片的原始尺寸。
对于已加载图片和加载中图片,该终端可以在该已下载数据中获取到该已加载图片的显示数据和加载中图片的显示数据,通过对这些显示数据进行计算,可以得预加载图片的显示尺寸和已加载图片的设备显示尺寸,而由于未加载图片还未在网页上显示,终端无法从已下载数据中获取到未加载图片的显示数据,因此,终端无法获取到未加载图片的设备显示尺寸。
203、该终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,该第一数组包括需要进行预加载再显示的图片地址,该第二数组包括能够直接显示的图片地址。
该终端可以将该至少一个图片内预加载图片的图片地址、加载中图片的图片地址以及已加载图片的图片地址进行分组,并将预加载图片作为需要进行预加载再显示的图片,将预加载图片的图片地址存储在第一数组中,该终端将加载中图片以及已加载图片作为能直接显示的图片,将加载中图片的图片地址以及已加载图片的图片地址存储在第二数组中。
该终端可以根据对该至少一个图片是否已经获取到终端本地,对该至少一个图片的图片地址进行分组。在一种可能的实现方式中,对于该至少一个图片中任一图片,如果该终端未获取到该图片的设备显示尺寸或原始尺寸,则该图片为预加载图片,该终端将该图片的图片地址存储至第一数组中;如果该终端获取到该图片的设备显示尺寸以及原始尺寸,则该图片为加载中图片或已加载图片,该终端将该图片的图片地址存储至第二数组中。
204、该终端根据该第一数组和第二数组中的图片地址,在该图片查看器中显示该网页内的多个图片。
该终端可以在该第一数组和第二数组中的各个图片地址内下载各个图片的原图,并将下载的原图显示在该图片查看器中,从而使得终端可以在图片查看器中显示网页内的多个图片。
由于第一数组内的图片地址为需要进行预加载再显示的图片的图片地址,也即是,预加载图片的图片地址,且第二数组内的图片地址为能够直接显示的图片的图片地址,也即是加载中图片的图片地址或已加载图片的图片地址,而预加载图片和加载中图片均为网页内未加载的图片,那么,当终端根据该第一数组和第二数组中的图片地址,在该图片查看器中显示该网页内的多个图片时,可以实现通过图片查看器显示网页内的未加载图片,进而可以解决无法通过图片查看器显示该网页内的未加载图片的问题。
图2所示实施例为通过对网页内的图片的图片地址进行分组,终端在图片查看器上显示网页内图片的过程。在一些实施例中,该终端还可以对网页内的缩略图进行过滤,并在图片查看器中显示过滤后的图片,为了体现终端通过图片查看器显示过滤后的图片的过程,本发明实施例提供了如图3所示的一种图片显示方法的流程图。该实施例包括下述步骤:
301、当在网页的任一网页元素上检测到操作信号,且该任一网页元素为普通图片时,终端则检测该网页上是否发生网页跳转,当在目标时长内未检测到该网页跳转,触发图片查看指令。
网页元素为该网页上所显示的任一内容,例如图片、文字和视频等。操作信号为用于触发图片查看指令的操作信号,具体与步骤201中对操作信号的描述同理。
该终端可以通过目标控件,来完成本步骤301,具体地,当目标控件检测到该操作信号后,该目标控件检测该网页上是否发生网页跳转,当在目标时长内未检测到网页跳转,则该目标控件生成该图片查看指令。其中,该目标控件可以是该网页内新增加的控件,也可以是该网页上已有的控件,对于已有的控件除了完成其原本的功能,也可以完成本步骤301,本发明实施例对该目标控件不做具体限定。
在一种可能的实现方式中,当在网页的任一网页元素上检测到操作信号,且该任一网页元素为普通图片时,终端则检测该网页上是否发生网页跳转,当在目标时长内检测到该网页跳转,则不触发该图片查看指令。
需要说明的是,有的网页上具有图片查看器,当用点击网页上的图片时,会调起网页的图片查看器,网页的图片查看器是通过跳转到另外一个URL来实现的,通过检测网页跳转,可以避免出现既打开了终端的图片查看器,又打开了网页的图片查看器的情况。
302、该终端接收对网页的图片查看指令,该图片查看指令用于指示通过图片查看器显示该网页内的至少一个图片。
303、该终端基于该网页的已下载数据,获取该至少一个图片的目标地址。
该终端可以在每个图片的img标签中src属性内获取每个图片的目标地址,从而可以获取到至少一个图片的目标地址。在一种可能的实现方式中,对于第一图片,该终端可以从该网页的已下载数据中,确定该第一图片的img标签,将该第一图片的img标签中src属性内所存储的地址作为该第一图片的目标地址。因此,终端可以从每个图片的img标签中src属性内获取到每个图片的目标地址。
对于未加载图片,由于还未在网页上进行加载,所以终端还没有将未加载图片img标签中src属性内的地址更新为占位图的图片地址,而当终端将加载中图片加载到网页上时,终端会将加载中图片img标签中src属性内占位图的图片地址更新为加载中图片的图片地址,进而使得终端可以在该图片地址内下载加载中图片,并在网页上显示该加载中图片,当该网页上显示该加载中图片后,该加载中图片变成已加载图片,因此,已加载图片和加载中图片的目标地址不同,所以终端获取的至少一个图片的目标地址包括占位图的图片地址和原始图片的图片地址。
304、该终端基于该网页的已下载数据,获取该至少一个图片的设备显示尺寸和原始尺寸。
该终端可以通过目标算法来计算每个图片的设备显示尺寸,在每个图片的img标签中目标属性内获取每个图片的原始尺寸,在一种可能的实现方式中,本步骤304可以通过下述步骤304A-304B所示的过程来实现。
304A、对于该网页内的第一图片,该终端基于该网页的已下载数据,调用目标算法,得到该第一图片的设备显示尺寸,该目标算法用于基于该网页的已下载数据,计算该第一图片的设备显示尺寸。
该终端可以在该已下载数据中获取到该已加载图片和加载中图片的占位图的显示数据,由于加载中图片虽然还没有显示,但是终端在网页会显示该加载中图片的占位图,进而可以获取该占位图的显示数据,占位图的设备显示尺寸和加载中图片的设备显示尺寸相同,因此,终端通过目标算法对显示数据进行计算,可以得已加载图片和加载中图片的设备显示尺寸。该目标算法可以是浏览器内核提供的用于计算图片的设备显示尺寸的算法,例如,计算图片的设备显示宽度的算法为window.getComputedStyle(img).width,计算图片的设备显示高度的算法为window.getComputedStyle(img).height。本发明实施例对该目标算法不做具体。
由于预加载图片的占位图还未在网页上显示,所以终端无法获取到预加载图片的占位图的显示数据,也就无法获取到预加载图片的设备显示尺寸。
304B、该终端从该网页的已下载数据中,确定该第一图片的图像标签,将该第一图像标签中目标属性内所存储的尺寸作为该第一图片的原始尺寸。
目标属性可以是该img标签中用于存储图片的原始尺寸的属性,例如,img标签中的natural width(自然宽度)属性用于存储图片的原始宽度,img标签中的natural height(自然高度)属性用于存储图片的原始高度,则该终端从第一图片的img标签中naturalwidth属性和natural height属性内,就可以获取到第一图片的原始宽度和原始高度,进而由该原始宽度和该原始高度可以组成第一图片的原始尺寸,本发明实施例对该目标属性不做具体限定。
虽然占位图的图片尺寸和对应的图片的原始尺寸一致,但是由于终端还未对预加载图片进行加载,所以终端可能无法获取到预加载图片的img标签中所指示的占位图,那么终端也就无法将占位图的尺寸作为预加载图片的原始尺寸。
另外,当网页内的图片很多时,一开始并不是所有图片都能被一起加载,像图片的原始尺寸这些信息要等到该图片被加载后,且终端才通过网络获取到该img标签内的URL对应图片的尺寸时,才能从该img标签中获取到图片的原始尺寸。
需要说明的是,对于第一图片,该终端也可以先执行步骤304B,再执行步骤304A,本发明实施例对步骤304A和304B的执行顺序不做具体限定。且当该终端对该网页内至少一个图片都执行完步骤304A-304B后,该终端即可获取到该至少一个图片中加载中图片的设备显示尺寸和原始尺寸以及已加载图片的设备显示尺寸和原始尺寸。
需要说明的是,该终端也可以先执行步骤304,再执行步骤303,本发明实施例对步骤303和步骤304的执行顺序不做具体限定。另外,上述步骤301-304所示的过程与步骤201-202所示的过程对应。
305、该终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,该第一数组包括需要进行预加载再显示的图片地址,该第二数组包括能够直接显示的图片地址。
当终端对该至少有一个图片都执行完步骤304后,该终端可以对该至少一个图片进行分组和过滤,也即是,根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,,具体地,终端可以将预加载图片的图片地址存储在第一数组中,将加载中图片的图片地址以及已加载图片的图片地址存储在第二数组中,从而达到对该至少一个图片进行分组的目的,该终端丢弃该至少一个图片内的缩略图的目标地址,以达到过滤缩略图的目的。
终端在确定第一数组和第二数据时,需要先判断图片的设备显示尺寸,再判断图片的原始尺寸,根据判断结果来确定第一数组和第二数组,为了体现确定第一数组和第二数组的过程,本发明实施例提供了图4和图5所示的过程,来确定第一数组,本发明实施例提供了图6和图7所示的过程,来确定第二数组,且本发明实施例还提供了图8和图9所示的过程,来过滤至少一个图片中的缩略图。
具体地,该终端在确定第一数组时,可以有多种实现方式,在一种可能的实现方式中,该终端根据该至少一个图片的设备显示尺寸的获取情况以及大小,确定第一数组的过程,参见本发明实施例提供了如图4所示的一种第一数组确定方法的流程图,该流程包括下述步骤3051-3053所示的过程。
步骤3051、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的设备显示尺寸。
步骤3052、当未获取到该第一图片的设备显示尺寸时,该第一终端从该第一图片的图像标签中,获取该第一图片的图片地址。
当通过步骤304A,该终端未获取到该第一图片的设备显示尺寸时,说明该第一图片为该网页内的预加载图片,该终端可以在该第一图片的img标签中获取该第一图片的图片地址。
由于终端可以通过不同的预加载方案来加载网页内的图片,对于不同的预加载方案,第一图片的图片地址可以存储在图片的img标签的不同属性中,终端可以根据预加载方案所指示的属性,来获取第一图片的图片地址。在一种可能的实现方式中,该终端根据该网页的预加载方案所指示的属性,从该第一图片的图像标签中该属性内获取该第一图片的图片地址。
步骤3053、该终端将获取的该第一图片的图片地址存储在第一数组中。
步骤3051-3053所示的过程为根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组的过程,也即是,对于该网页内的第一图片,当未获取到该第一图片的设备显示尺寸时,该终端从该第一图片的图像标签中,获取该第一图片的图片地址,将该第一图片的图片地址存储至该第一数组中的过程。
图4所示的过程为终端根据至少一个图片的设备显示尺寸,确定第一数组的过程。在一些可能的实施方式中,该终端还可以通过至少一个图片的设备显示尺寸和原始尺寸,确定第一数组,具体地,参见本发明实施例提供了如图5所示的一种第一数组确定方法的流程图,该流程包括下述步骤3061-3065所示的过程。
步骤3061、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的设备显示尺寸。
步骤3062、当终端获取到该第一图片的设备显示尺寸后,该终端判断该第一图片的设备显示尺寸是否大于或等于第一阈值。
第一阈值可以是缩略图的最大尺寸,例如,第一阈值为85x85像素,当该第一图片的设备显示尺寸大于或等于该第一阈值时,则认为该第一图片在终端上显示时,显示的不是缩略图。从而可以避免将缩略图的图片地址存储在第一数组中,进而可以达到过滤缩略图的目的。需要说明的是,本发明实施例对该第一阈值不做具体限定。
步骤3063、当该第一图片的设备显示尺寸大于或等于该第一阈值时,该终端判断是否获取到该第一图片的原始尺寸。
步骤3064、当该终端未获取到该第一图片的原始尺寸时,该终端从该第一图片的图像标签中,获取该第一图片的图片地址。
当通过步骤304B,该终端未获取到该第一图片的原始尺寸时,说明该第一图片为预加载图片,该终端可以在该第一图片的img标签中获取该第一图片的图片地址。
步骤3065、该终端将获取的该第一图片的图片地址存储在第一数组中。
步骤3061-3065所示的过程为终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组的过程,也即是,当获取到该第一图片的设备显示尺寸,且该第一图片的设备显示尺寸大于或等于第一阈值,且未获取到该第一图片的原始尺寸时,该终端从该第一图片的图像标签中,获取该第一图片的图片地址,将该第一图片的图片地址存储至该第一数组中。也即是,终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第一数组的过程。
终端还可以根据至少一个图片的设备显示尺寸的获取情况以及大小,确定第二数组,具体地,参见本发明实施例提供了如图6所示的一种第二数组确定方法的流程图,该流程包括下述步骤3071-3077所示的过程。
步骤3071、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的设备显示尺寸。
步骤3072、当终端获取到该第一图片的设备显示尺寸后,该终端判断该第一图片的设备显示尺寸是否大于或等于第一阈值。
步骤3073、当该第一图片的设备显示尺寸大于或等于该第一阈值时,该终端判断是否获取到该第一图片的原始尺寸。
步骤3074、当该终端获取到该第一图片的原始尺寸时,该终端判断该第一图片的原始尺寸是否大于或等于第二阈值。
第二阈值可以是原始图片的最小尺寸,以保证原始图片的清晰度,例如,第二阈值为200x200像素,本发明实施例对该第二阈值不做具体限定。当该第一图片的原始尺寸大于或等于第二阈值时,可以认为该第一图片清晰,则该终端可以将该第一图片的图片地址存储至该第二数组中。
步骤3075、当该第一图片的原始尺寸大于或等于该第二阈值时,该终端判断该第一图片是否为加载中图片。
步骤3076、如果该第一图片为加载中图片时,该终端从该第一图片的图像标签中,获取该第一图片的图片地址。
终端既可以获取到加载中图片的设备显示尺寸和原始尺寸,也可以获取到已加载图片的设备显示尺寸和原始尺寸,但是,加载中图片的img标签内src属性中为占位图的图片地址,所以终端还需要在预加载方案所指示的属性内,获取加载中图片的图片地址。
如果终端获取到该第一图的设备显示尺寸和原始尺寸,且该终端在加载该第一图片时,采用的是懒加载技术,则认为该第一图片为加载中图片,那么,该终端可以根据该网页的预加载方案所指示的属性,从该第一图片的图像标签中该属性内获取该第一图片的图片地址。
步骤3077、将该第一图片的图片地址存储至该第二数组中。
步骤3071-3077所示的过程为终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第二数组的过程,也即是,对于该网页内的第一图片,当获取到该第一图片的设备显示尺寸,且该第一图片的设备显示尺寸大于或等于第一阈值,且获取到该第一图片的原始尺寸,且该第一图片的原始尺寸大于或等于第二阈值时,如果该第一图片为加载中图片,该终端从该第一图片的图像标签中,获取该第一图片的图片地址,将该第一图片的图片地址存储至该第二数组中的过程。
终端还可以根据至少一个图片的设备显示尺寸的获取情况以及大小、原始尺寸的获取情况以及大小,确定第二数组,具体地,参见本发明实施例提供了如图7所示的一种第二数组确定方法的流程图,该流程包括下述步骤3081-3086所示的过程。
步骤3081、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的设备显示尺寸。
步骤3082、当终端获取到该第一图片的设备显示尺寸后,该终端判断该第一图片的设备显示尺寸是否大于或等于第一阈值。
步骤3083、当该第一图片的设备显示尺寸大于或等于该第一阈值时,该终端判断是否获取到该第一图片的原始尺寸。
步骤3084、当该终端获取到该第一图片的原始尺寸时,该终端判断该第一图片的原始尺寸是否大于或等于第二阈值。
步骤3085、当该第一图片的原始尺寸大于或等于该第二阈值时,该终端判断该第一图片是否加载中图片。
步骤3086、如果该第一图片不为加载中图片,该终端将该第一图片的图像标签中源文件属性内所存储的地址存储至该第二数组中。
如果该终端在该网页上显示过第一图片,则该第一图片不为加载中图片,为已加载图片,则该第一图片的img标签中src属性内的地址为该第一图片的图片地址,则该终端可以直接在该src属性内获取该第一图片的图片地址,并将该第一图片的图片地址存储至该第二数组中。
上述步骤3081-3086所示的过程为终端根据该至少一个图片的设备显示尺寸和原始尺寸,确定第二数组的过程,也即是,对于该网页内的第一图片,当获取到该第一图片的设备显示尺寸,且该第一图片的设备显示尺寸大于或等于第一阈值,且获取到该第一图片的原始尺寸,且该第一图片的原始尺寸大于或等于第二阈值时,如果该第一图片不为加载中图片,该终端将该第一图片的图像标签中源文件属性内所存储的地址存储至该第二数组中的过程。
需要说明的是,该第二数组中还可以包括第一子数组和第二子数组,其中,第一子数组用于存储加载中图片的图片地址,也即是,存储该终端在步骤3076中获取的图片地址,第二子数组用于存储已加载图片的图片地址,也即是,存储该终端在步骤3086中获取的图片地址。
该终端还可以根据至少一个图片的设备显示尺寸的大小,过滤该至少一个图片中的缩略图,具体地,参见本发明实施例提供了如图8所示的一种缩略图过滤方法的流程图,该流程包括下述步骤3091-3093所示的过程。
步骤3091、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的图片尺寸。
步骤3092、当获取到该第一图片的设备显示尺寸时,该第一终端判断该第一图片的设备显示尺寸是否大于或等于第一阈值。
步骤3093、当该第一图片的设备显示尺寸小于该第一阈值时,该终端丢弃该第一图片的目标地址。
当该第一图片的设备显示尺寸小于该第一阈值时,则认为该第一图片显示的是缩略图或者是按钮图标,该终端丢弃该缩略图的目标地址,从而该终端不会基于该目标地址显示该缩略图,从而可以达到过滤缩略图的目的。
上述步骤3091-3093所示的过程,也即是,当获取到该第一图片的设备显示尺寸,且该第一图片的设备显示尺寸小于该第一阈值时,丢弃从该第一图片的图像标签中源文件属性内所获取的目标地址的过程。
该终端还可以根据图片的设备显示尺寸的大小以及原始尺寸的大小,过滤该至少一个图片中的缩略图,具体地,参见本发明实施例提供了如图9所示的一种缩略图过滤方法的流程图,该流程包括下述参见下述步骤3101-3105所示的过程。
步骤3101、对于该网页内的第一图片,当该终端对该第一图片执行获取该第一图片的设备显示尺寸的步骤后,该终端判断是否获取到该第一图片的图片尺寸。
步骤3102、当获取到该第一图片的设备显示尺寸时,该第一终端判断该第一图片的设备显示尺寸是否大于或等于第一阈值。
步骤3103、当该第一图片的设备显示尺寸大于或等于该第一阈值时,该终端判断是否获取到该第一图片的原始尺寸。
步骤3104、当该终端获取到该第一图片的原始尺寸时,该终端判断该第一图片的原始尺寸是否大于或等于第二阈值。
步骤3105、当该第一图片的原始尺寸小于该第二阈值时,该终端丢弃该第一图片的目标地址。
当第二阈值是原始图片的最小尺寸,且该第一图片的原始尺寸小于第二阈值时,则该第一图片的原始图片不清晰,那么,当该终端显示该第一图片时,第一图片也不会清晰,该终端可以直接丢弃该第一图片的目标地址,也无需获取该第一图片的图片地址,进而可以不在该图片地址中下载该第一图片,也不会在图片查看器中显示该第一图片,从而达到过滤不清晰的原始图片的目的。
上述步骤3101-3105所示的过程,也即是,当该第一图片的显示尺寸大于或等于该第一阈值,且获取到该第一图片的原始尺寸,且该第一图片的原始尺寸小于第二阈值时,该终端丢弃从该第一图片的图像标签中源文件属性内所获取的目标地址的过程。
需要说明的是,该终端可以在该网页上注入目标JS代码,通过运行该目标JS代码,来实现步骤3051-3053、3061-3065、3071-3077、3081-3086、3091-3093、3101-3105所示的过程。
311、该终端根据该第一数组和第二数组中的图片地址,在该图片查看器中显示该网页内的多个图片。
对于在该图片查看器中显示的任一图片,该终端需要在该任一图片的图片地址中下载该任一图片,才能进行显示,在一种可能的实现方式中,本步骤311可以由下述步骤311A-311B中的至少一个步骤来实现。
步骤311A、该终端从该第一数组中获取任一第二图片地址,从该第二图片地址中下载第二图片,当该第二图片的原始尺寸大于或等于第二阈值时,该终端在该图片查看器中显示该第二图片,否则,不在该图片查看器中显示该第二图片。
该第二图片地址为该第一数组中的任一图片地址,当该终端在第二图片地址中下载完该第二图片后,该终端还需要对该第二图片的原始尺寸进行判断,当该第二图片的原始尺寸大于或等于第二阈值时,则该第二图片的原始图片清晰,该终端可以在该图片查看器内显示该第二图片,否则该第二图片的原始图片不清晰,则该终端不在该图片查看器中显示该第二图片,从而该终端可以避免显示不清晰的图片。
当该终端对该第一数组中多个图片的图片地址均执行本步骤306A时,则该终端就可以在该图片查看器中显示这多个图片。
步骤311B、该终端从该第二数组中获取任一第三图片地址,从该第三图片地址中下载第三图片,在该图片查看器中显示该第三图片。
该第三图片地址为该第二数组中的任一图片地址。当该终端对该第二数组中多个图片的图片地址均执行本步骤311B时,则该终端就可以在该图片查看器中显示这多个图片。
需要说明的是,由于该终端在网页上加载图片时,该终端会在加载的图片的图片地址内下载图片,以实现图片的加载,那么,当该第二数组中包括第一子数组和第二子数组时,对于该第二子数组中的图片地址所指示的图片,该终端在加载网页时,已经完成了对该图片的下载,所以,该终端可以直接获取下载完成的图片,并在图片查看器上显示该图片。而对于第一子数组中的图片地址,该终端还未曾在该图片地址中下载过图片,则该终端需要在该图片地址中下载图片,才能在图片查看器上显示该图片。
由于在步骤311A中终端需要判断图片的原始尺寸,在一些可能的实现方式中,该终端可以先执行步骤311B,再执行步骤311A,当然,为了降低显示时间,该终端也可以同时执行步骤311B和311A,本发明实施例对步骤311A和311B的执行顺序不做具体限定。
当该终端在该图片查看器中显示网页内的图片时,该终端还可以根据操作信号,对该网页内的图片进行显示。在一种可能的实现方式中,该终端将原始尺寸大于或等于第二阈值的第二图片的缩略图和该第三图片的缩略图显示在该图片查看器的第一预设区域,当在任一缩略图上检测到操作信号时,该终端在该图片查看器的第二预设区域处,显示与该缩略图对应的图片。
其中,操作信号为用于触发图片查看器显示图片的信号,可以是点击缩略图的信号,本发明实施例对该操作信号不做具体限定。第二预设区域为图片查看器显示图片的区域,该第一预设区域可以是该图片查看器内除第二预设区域外的任一区域,在该第一预设区域内可以显示预设数目的图片的缩略图,通过滑动操作,该终端可以在该第一预设区域内显示该图片查看器可以显示的所有图片的缩略图,本发明实施例对该预设数目不做具体限定。
例如,参见图10中的图片查看器1,图10是本发明实施例提供的一种图片显示对比图。该终端在图片查看器1第一预设区域内的最右侧的缩略图上检测到操作信号,则该终端在图片查看器1的第二预设区域处显示与该缩略图对应的图片。
由于第一数组内的图片地址所指示的图片的设备显示尺寸大于或等于第一阈值,且第二数组内的图片地址所指示的图片的设备显示尺寸也大于或等于第一阈值,则该终端在通过图片查看器显示第一数组内的图片地址所指示的图片不是缩略图,且显示的第二数组内的图片地址所指示的图片也不是缩略图,从而达到了过滤缩略图的目的。例如,图10中的在图片查看器1在第二预设区域所显示的图片不是缩略图,而图10中的网页上显示有5个缩略图,图片查看器2在显示该网页上的图片时,显示的是网页上的缩略图,该图片查看器2上目前所显示的图即为该网页上最底部的一个缩略图。
由于第一数组内的图片地址为该网页上预加载图片的图片地址,而第二数组内的图片地址为该网页内的已加载图片的图片地址和加载中图片的图片地址,基于第一数组中的图片地址,该终端可以在该图片查看器上显示第一数组中的图片地址所指示的预加载图片,基于第二数组中的图片地址,该终端也可以在该图片查看器上显示第二数组中的图片地址所指示加载中图片,所以,该终端可以在该图片查看器上显示该网页内的预加载图片、预加载中图片和已加载图片。例如,参见图11,图11是本发明实施例提供的一种图片显示对比图,图11中的图片查看器1可以显示该网页内的预加载图片、加载中图片和已加载的图片,而图片查看器2只能显示网页上已加载的2张图片。需要说明的是,图10和图11中的图片查看器1在显示网页上的图片时,图片查看器1所在的终端执行了上述步骤301-311所示的过程,而图10和图11中的图片查看器2在显示网页上的图片时,图片查看器2所在的终端没有执行上述步骤301-316所示的过程。
需要说明的是,上述步骤301-311所示的过程中,用户只需要通过操作信号触发图片查看指令后,就可以直接在该终端的图片查看器上查看网页内的图片,而不用通过长按图片,触发终端显示菜单,然后,点击菜单中的“进行看图模式”,才能在图片查看器上查看网页内的图片,从而提高了用户的体验度。
为了进一步体现上述步骤301-311所示的过程,参见图12,图12是本发明实施例提供的一种图片显示方法的流程图。当用户长按或者点击网页内的图片时,该终端向该网页内注目标JS代码,运行目标JS代码,以确定第一数组和第二数组,当目标JS代码运行完成时,该目标JS代码将确定的第一数组和第二数组返回给终端,该终端可以在第一数组中的图片地址和第二数组中的图片地址内下载图片,并在图片查看器上显示下载的图片。
本发明实施例所提供的方法,通过网页内至少一个图片的设备显示尺寸和原始尺寸,对该至少一个图片的图片地址进行分组,得到包括需要进行预加载再显示的图片地址的第一数组和包括能够直接显示的图片地址的第二数组,由于第一数组内的图片地址为预加载图片的图片地址,且第二数组内的图片地址为加载中图片的图片地址或已加载图片的图片地址,而预加载图片和加载中图片均为网页内未加载的图片,那么,当终端根据该第一数组和第二数组中的图片地址,在该图片查看器中显示该网页内的多个图片时,可以实现通过图片查看器显示网页内的未加载图片,进而可以解决无法通过图片查看器显示网页内的未加载图片的问题。并且,由于第一数组内的图片地址所指示的图片的设备显示尺寸大于或等于第一阈值,且第二数组内的图片地址所指示的图片的设备显示尺寸也大于或等于第一阈值,则该终端在通过图片查看器显示第一数组内的图片地址所指示的图片不是缩略图,且显示的第二数组内的图片地址所指示的图片也不是缩略图,从而达到了过滤缩略图的目的。并且,用户只需要通过操作信号触发图片查看指令后,就可以直接在该终端的图片查看器上查看网页内的图片,而不用通过长按图片,触发终端显示菜单,然后,点击菜单中的“进行看图模式”,才能在图片查看器上查看网页内的图片,从而提高了用户的体验度。并且,通过检测网页跳转,可以避免出现既打开了终端的图片查看器,又打开了网页的图片查看器的情况。并且,当第二阈值是原始图片的最小尺寸,且该第一图片的原始尺寸小于第二阈值时,则该第一图片的原始图片不清晰,那么,当该终端显示该第一图片时,第一图片也不会清晰,该终端可以直接丢弃该第一图片的目标地址,也无需获取该第一图片的图片地址,进而可以不在该图片地址中下载该第一图片,也不会在图片查看器中显示该第一图片,从而达到过滤不清晰的原始图片的目的。
图13是本发明实施例提供的一种网页显示装置结构示意图,该装置包括:
接收模块1301,用于接收对网页的图片查看指令,所述图片查看指令用于指示通过图片查看器显示所述网页内的至少一个图片;
获取模块1302,用于基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸;
确定模块1303,用于根据所述至少一个图片的设备显示尺寸和原始尺寸,确定第一数组和第二数组,所述第一数组包括需要进行预加载再显示的图片地址,所述第二数组包括能够直接显示的图片地址;
显示模块1304,用于根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片。
可选地,所述获取模块1302用于:
对于所述网页内的第一图片,基于所述网页的已下载数据,调用目标算法,得到所述第一图片的设备显示尺寸,所述目标算法用于基于所述网页的已下载数据,计算所述第一图片的设备显示尺寸;
从所述网页的已下载数据中,确定所述第一图片的图像标签,将所述第一图像标签中目标属性内所存储的尺寸作为所述第一图片的原始尺寸。
可选地,所述确定模块1303用于:
对于所述网页内的第一图片,当未获取到所述第一图片的设备显示尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第一数组中;
当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于第一阈值,且未获取到所述第一图片的原始尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第一数组中。
可选地,所述确定模块1303用于:
对于所述网页内的第一图片,当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于第一阈值,且获取到所述第一图片的原始尺寸,且所述第一图片的原始尺寸大于或等于第二阈值时,如果所述第一图片不为加载中图片,将所述第一图片的图像标签中源文件属性内所存储的地址存储至所述第二数组中;
如果所述第一图片为加载中图片,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第二数组中。
可选地,所述从所述第一图片的图像标签中,获取所述第一图片的图片地址包括:
根据所述网页的预加载方案所指示的属性,从所述第一图片的图像标签中所述属性内获取所述第一图片的图片地址。
可选地,所述装置还包括:
第一丢弃模块,用于当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸小于所述第一阈值时,丢弃从所述第一图片的图像标签中源文件属性内所获取的目标地址。
可选地,所述装置还包括:
第一丢弃模块,用于当所述第一图片的显示尺寸大于所述第一阈值,且获取到所述第一图片的原始尺寸,且所述第一图片的原始尺寸小于第二阈值时,丢弃从所述第一图片的图像标签中源文件属性内所获取的目标地址。
可选地,所述显示模块1304,用于下述至少一个步骤:
从所述第一数组中获取任一第二图片地址,从所述第二图片地址中下载第二图片,当所述第二图片地址所指示的第二图片的原始尺寸大于或等于第二阈值时,在所述图片查看器中显示所述第二图片,否则,丢弃不在所述图片查看器中显示所述第二图片;
从所述第二数组中获取任一第三图片地址,从所述第三图片地址中下载第三图片,在所述图片查看器中显示所述第三图片。
可选地,所述显示模块1304还用于:
将原始尺寸大于或等于第二阈值的第二图片的缩略图和所述第三图片的缩略图显示在所述图片查看器的第一预设区域,当在任一缩略图上检测到操作信号时,在所述图片查看器的第二预设区域处,显示与所述缩略图对应的图片。
可选地,所述装置还包括:
触发模块,用于当在所述网页的任一网页元素上检测到操作信号,且所述任一网页元素为普通图片时,则检测所述网页上是否发生网页跳转,当在目标时长内未检测到所述网页跳转,触发所述图片查看指令。
上述所有可选技术方案,可以采用任意结合形成本公开的可选实施例,在此不再一一赘述。
需要说明的是:上述实施例提供的图片显示装置在显示图片时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的图片显示装置与图片显示方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图14对终端中的软件进行了描述,为了进一步体现终端的硬件结构,参见图14,图14是本发明实施例提供的一种终端的结构示意图,该终端1400可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上CPU(central processing units,处理器)1401和一个或一个以上的存储器1402,其中,所述存储器1402中存储有至少一条指令,所述至少一条指令由所述处理器1401加载并执行以实现上述各个方法实施例提供的方法。当然,该终端1400还可以具有有线或无线网络接口、键盘以及输入输出接口等部件,以便进行输入输出,该终端1400还可以包括其他用于实现设备功能的部件,在此不做赘述。
在示例性实施例中,还提供了一种计算机可读存储介质,例如包括指令的存储器,上述指令可由终端中的处理器执行以完成上述实施例中的图片显示方法。例如,所述计算机可读存储介质可以是ROM(read-only memory,只读存储器)、RAM(random accessmemory,随机存取存储器)、CD-ROM(compact disc read-only memory,只读光盘)、磁带、软盘和光数据存储设备等。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (11)

1.一种图片显示方法,其特征在于,所述方法包括:
接收对网页的图片查看指令,所述图片查看指令用于指示通过图片查看器显示所述网页内的至少一个图片;
基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸;
对于所述网页内的第一图片,当未获取到所述第一图片的设备显示尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至第一数组中;当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于第一阈值,且未获取到所述第一图片的原始尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第一数组中,所述第一数组包括需要进行预加载再显示的图片地址;
当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于所述第一阈值,且获取到所述第一图片的原始尺寸,且所述第一图片的原始尺寸大于或等于第二阈值时,如果所述第一图片不为加载中图片,将所述第一图片的图像标签中源文件属性内所存储的地址存储至第二数组中;如果所述第一图片为加载中图片,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第二数组中,所述第二数组包括能够直接显示的图片地址;
根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片。
2.根据权利要求1所述的方法,其特征在于,所述基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸包括:
对于所述网页内的第一图片,基于所述网页的已下载数据,调用目标算法,得到所述第一图片的设备显示尺寸,所述目标算法用于基于所述网页的已下载数据,计算所述第一图片的设备显示尺寸;
从所述网页的已下载数据中,确定所述第一图片的图像标签,将所述图像标签中目标属性内所存储的尺寸作为所述第一图片的原始尺寸。
3.根据权利要求1所述的方法,其特征在于,所述从所述第一图片的图像标签中,获取所述第一图片的图片地址包括:
根据所述网页的预加载方案所指示的属性,从所述第一图片的图像标签中所述属性内获取所述第一图片的图片地址。
4.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸小于所述第一阈值时,丢弃从所述第一图片的图像标签中源文件属性内所获取的目标地址。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当所述第一图片的显示尺寸大于所述第一阈值,且获取到所述第一图片的原始尺寸,且所述第一图片的原始尺寸小于第二阈值时,丢弃从所述第一图片的图像标签中源文件属性内所获取的目标地址。
6.根据权利要求1所述的方法,其特征在于,所述根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片包括下述至少一个步骤:
从所述第一数组中获取任一第二图片地址,从所述第二图片地址中下载第二图片,当所述第二图片地址所指示的第二图片的原始尺寸大于或等于第二阈值时,在所述图片查看器中显示所述第二图片,否则,丢弃不在所述图片查看器中显示所述第二图片;
从所述第二数组中获取任一第三图片地址,从所述第三图片地址中下载第三图片,在所述图片查看器中显示所述第三图片。
7.根据权利要求6所述的方法,其特征在于,所述方法还包括:
将原始尺寸大于或等于第二阈值的第二图片的缩略图和所述第三图片的缩略图显示在所述图片查看器的第一预设区域,当在任一缩略图上检测到操作信号时,在所述图片查看器的第二预设区域处,显示与所述缩略图对应的图片。
8.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当在所述网页的任一网页元素上检测到操作信号,且所述任一网页元素为普通图片时,则检测所述网页上是否发生网页跳转,当在目标时长内未检测到所述网页跳转,触发所述图片查看指令。
9.一种图片显示装置,其特征在于,所述装置包括:
接收模块,用于接收对网页的图片查看指令,所述图片查看指令用于指示通过图片查看器显示所述网页内的至少一个图片;
获取模块,用于基于所述网页的已下载数据,获取所述至少一个图片的设备显示尺寸和原始尺寸;
确定模块,用于对于所述网页内的第一图片,当未获取到所述第一图片的设备显示尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至第一数组中;当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于第一阈值,且未获取到所述第一图片的原始尺寸时,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第一数组中,所述第一数组包括需要进行预加载再显示的图片地址;当获取到所述第一图片的设备显示尺寸,且所述第一图片的设备显示尺寸大于或等于所述第一阈值,且获取到所述第一图片的原始尺寸,且所述第一图片的原始尺寸大于或等于第二阈值时,如果所述第一图片不为加载中图片,将所述第一图片的图像标签中源文件属性内所存储的地址存储至第二数组中;如果所述第一图片为加载中图片,从所述第一图片的图像标签中,获取所述第一图片的图片地址,将所述第一图片的图片地址存储至所述第二数组中,所述第二数组包括能够直接显示的图片地址;
显示模块,用于根据所述第一数组和第二数组中的图片地址,在所述图片查看器中显示所述网页内的多个图片。
10.一种终端,其特征在于,所述终端包括一个或多个处理器和一个或多个存储器,所述一个或多个存储器中存储有至少一条指令,所述指令由所述一个或多个处理器加载并执行以实现如权利要求1至权利要求8任一项所述的图片显示方法所执行的操作。
11.一种计算机可读存储介质,其特征在于,所述存储介质中存储有至少一条指令,所述指令由处理器加载并执行以实现如权利要求1至权利要求8任一项所述的图片显示方法所执行的操作。
CN201910290739.3A 2019-04-11 2019-04-11 图片显示方法、装置、终端及计算机可读存储介质 Active CN110059281B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910290739.3A CN110059281B (zh) 2019-04-11 2019-04-11 图片显示方法、装置、终端及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910290739.3A CN110059281B (zh) 2019-04-11 2019-04-11 图片显示方法、装置、终端及计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN110059281A CN110059281A (zh) 2019-07-26
CN110059281B true CN110059281B (zh) 2022-11-29

Family

ID=67318833

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910290739.3A Active CN110059281B (zh) 2019-04-11 2019-04-11 图片显示方法、装置、终端及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN110059281B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104123330A (zh) * 2013-06-20 2014-10-29 腾讯科技(深圳)有限公司 一种网页图片查看方法及装置
CN106294413A (zh) * 2015-05-25 2017-01-04 阿里巴巴集团控股有限公司 图片的加载方法和装置
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质
CN109298905A (zh) * 2018-08-15 2019-02-01 深圳点猫科技有限公司 利用前端编程语言优化图片懒加载的方法以及电子设备

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7885861B2 (en) * 2008-06-23 2011-02-08 Vistaprint Technologies Limited Method, system, and storage for creating a montage of composite product images
US8826141B2 (en) * 2010-02-12 2014-09-02 Blackberry Limited Image-based and predictive browsing
CN104679570A (zh) * 2015-03-24 2015-06-03 新余兴邦信息产业有限公司 图片的加载显示方法、设备和系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104123330A (zh) * 2013-06-20 2014-10-29 腾讯科技(深圳)有限公司 一种网页图片查看方法及装置
CN106294413A (zh) * 2015-05-25 2017-01-04 阿里巴巴集团控股有限公司 图片的加载方法和装置
CN109086374A (zh) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 网页加载显示方法、装置、终端设备及可读存储介质
CN109298905A (zh) * 2018-08-15 2019-02-01 深圳点猫科技有限公司 利用前端编程语言优化图片懒加载的方法以及电子设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Maygh:building a CDN from client web browsers;Liang Zhang等;《Proceeding of the 8th ACM European conference on computer system》;20130430;281-294页 *
适用于web需求的图片处理系统的设计与实现;刘艳伟;《中国优秀硕士学位论文全文数据库 信息科技辑》;20150115;I138-1324 *

Also Published As

Publication number Publication date
CN110059281A (zh) 2019-07-26

Similar Documents

Publication Publication Date Title
CN108920048B (zh) 大型图纸浏览方法、系统、服务器及计算机可读存储介质
US9128596B2 (en) Method and device for selecting and displaying a region of interest in an electronic document
CN105867714B (zh) 应用程序下载方法、装置及系统
US20130111368A1 (en) Creating and maintaining images of browsed documents
US20060101330A1 (en) Browser sitemap viewer
US9165340B2 (en) Image display system, image display method, image display program, and computer-readable recording medium storing said program
CN112100543B (zh) 渲染网页的方法、装置、存储介质及电子设备和服务器
CN112774192B (zh) 游戏场景跳转方法、装置、电子设备及存储介质
EP2866158A1 (en) Method for reader to provide service, reader, terminal and computer storage medium
CN109361948B (zh) 界面管理方法、智能终端及可读存储介质
CN110362766B (zh) 一种页面显示控制方法及终端
CN107045546B (zh) 一种网页处理方法、装置及智能终端
CN117194828B (zh) React中Table滚动分页方法、装置及电子设备
US10152546B2 (en) Method, system and terminal for performing search in a browser
CN106528136A (zh) 基于微件的显示方法、装置以及终端设备
CN104598467B (zh) 一种网页图片的显示方法及装置
CN107943921B (zh) 页面分享信息生成方法、装置、计算机设备和存储介质
CN114356479A (zh) 一种页面渲染方法及装置
CN106055688B (zh) 搜索结果的展现方法、装置和移动终端
CN110489023A (zh) 多窗口显示的实现方法、装置、设备、介质和系统
CN110059281B (zh) 图片显示方法、装置、终端及计算机可读存储介质
CN113805997B (zh) 信息显示方法、装置、电子设备和存储介质
CN116028048A (zh) 一种脚本的生成方法、装置、电子设备及存储介质
CN115933943A (zh) 图像展示方法、装置及存储介质
CN110622135B (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
GR01 Patent grant
GR01 Patent grant