一种网页显示方法及相关装置制造方法及图纸

本申请公开了一种网页显示方法，包括：电子设备首先，获取第一网页中图片所处图片服务器的地址信息。然后，根据图片服务器的地址信息，从图片服务器获取第一指示信息。其中，第一指示信息用于指示该图片的尺寸，第一指示信息的数据量小于该图片的数据量。接着，电子设备构建所述图片的占位图，该图片的占位图的尺寸与第一指示信息指示的尺寸相同。最后，电子设备显示该第一网页，该第一网页中该图片的显示区域中显示有该图片的占位图。这样，电子设备在浏览器开启无图模式浏览网页时，网页的页面排版布局与浏览器在有图模式时一致，提高了用户体验。

A Web Page Display Method and Related Devices

【技术实现步骤摘要】
一种网页显示方法及相关装置
本申请涉及通信
，尤其涉及一种网页显示方法及相关装置。
技术介绍
随着互联网和移动终端的发展，越来越多的用户使用移动终端访问互联网。而目前由于网络流量和网络速度的限制，很多时候移动终端并不加载图片。例如，目前在手机浏览器的无图模式下，浏览器对于图片采取了全部禁用的方式，使得浏览器不显示网页中的图片，仅在图片显示区域显示一个占位图，通过浏览器的无图模式，可以节省网络流量。目前，当移动终端的浏览器开启无图模式时，浏览器会拦截网页资源中的图片资源请求，并根据页面中的层叠样式表(cascadingstylesheets，CSS)或者图像的标签信息，显示与图片显示区域相应大小的占位图。当CSS或者图像的标签信息中未指定有图片显示区域的大小尺寸时，则移动终端会在浏览器所打开网页中图片显示区域上显示1个像素点大小的占位图，或者不显示占位图。这样，会导致网页页面的布局错误，进而使得页面效果与在网页上正常显示图片时的页面效果存在偏差，例如，文字错位，占位图过长等，影响用户体验。
技术实现思路
本申请提供了一种网页显示方法及相关装置，实现了电子设备在浏览器开启无图模式浏览网页时，网页的页面排版布局与浏览器在有图模式时一致，提高了用户体验。第一方面，本申请提供了一种网页显示方法，包括：首先，电子设备获取第一网页中图片所处图片服务器的地址信息。然后，该电子设备根据该图片服务器的地址信息，从该图片服务器获取第一指示信息。接着，该第一指示信息用于指示该图片的尺寸，该第一指示信息的数据量小于该图片的数据量。接着，该电子设备构建该图片的占位图，该图片的占位图的尺寸与该第一指示信息指示的尺寸相同。最后，该电子设备显示该第一网页，该第一网页中该图片的显示区域中显示该图片的占位图。通过本申请实施例，在浏览器开启无图模式后，电子设备在通过该浏览器打开网页时，电子设备可以从网页服务器上获取网页布局信息及文字资源的同时，从网页服务器上获取图片的尺寸信息，电子设备可以根据图片的尺寸以及图片显示区域尺寸信息，确定出图片显示区域中占位图的尺寸。这样，可以使电子设备的浏览器在无图模式下，网页页面的排版布局与正常模式一致，提高了用户的体验。在一种可能的实现方式中，在该电子设备显示该第一网页之前，该方法还包括：首先，该电子设备获取该图片的显示区域的宽度信息。该电子设备按照第一比例，调整该图片的占位图在该图片的显示区域中的显示尺寸。其中，该第一比例为该图片的显示区域的宽度与该图片的占位图的宽度之比，该图片的占位图的显示宽度与该图片的显示区域的宽度相同。这样，电子设备根据原始图片的尺寸在生成相同大小的占位图后，结合页面布局信息的约束将占位图显示网页页面上，可以使无图模式下页面排版效果与浏览器正常模式下显示原始图片的页面排版相同，提高了用户体验。在一种可能的实现方式中，该第一指示信息为该图片内的第一数据，该第一数据为该图片的第1个数据单元至第L个数据单元之间的数据，L为大于1的正整数；其中，该数据单元包括：比特或字节。这样，电子设备可以从网页服务器上获取网页布局信息及文字资源的同时，从网页服务器上获取图片中的前面部分数据(例如图片的前1K字节数据)，其中，该图片中的前面部分数据包括有图片的尺寸。进而，可以使电子设备的浏览器在无图模式下，网页页面的排版布局与正常模式一致，且节省了数据下载流量，提高了用户的体验。在一种可能的实现方式中，该L根据该图片的文件类型确定。这样，电子设备可以根据图片的文件类型，来确定从服务器上获取的图片的前面部分数据的数据量，在保证能够获取到图片的尺寸信息的同时，节省了电子设备的流量。在一种可能的实现方式中，该电子设备根据该图片服务器的地址信息，从该图片服务器获取第一指示信息，包括：该电子设备判断第一网页中是否包括有该图片的尺寸信息，若否，则根据该图片服务器的地址信息，从该图片服务器获取第一指示信息。这样，可以在网页中没有该图片的尺寸信息时，从图片服务器上获取图片的尺寸信息，节省了加载网页所消耗的数据流量。在一种可能的实现方式中，该电子设备根据该图片服务器的地址信息，从该图片服务器获取第一指示信息，包括：该电子设备判断该电子设备浏览网页的模式是否为无图模式，若是，则该电子设备根据该图片服务器的地址信息，从该图片服务器获取第一指示信息。这样，可以根据用户的需求，选择性的开启无图模式，节省加载网页所消耗的数据流量。在一种可能的实现方式中，在该电子设备获取第一网页中图片所处图片服务器的地址信息之前，该方法还包括：该电子设备接收用户针对第一网页的访问请求，其中，该针对第一网页的访问请求包括该第一网页所处网页服务器的地址信息；该电子设备根据该网页服务器的地址信息，从该网页服务器上获取该第一网页。第二方面，本申请提供了一种电子设备，包括：一个或多个处理器、显示屏、一个或多个存储器、收发器；该一个或多个存储器与该一个或多个处理器和该收发器耦合，该收发器用于与外部通信设备进行通信，该显示屏与该一个或多个处理器通信，该一个或多个存储器用于存储计算机程序代码，该计算机程序代码包括计算机指令，当该一个或多个处理器执行该计算机指令时，使得该电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。第三方面，本申请实施例提供了一种计算机存储介质，其特征在于，包括计算机指令，当计算机指令在电子设备上运行时，使得电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。第四方面，本申请提供了一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。附图说明图1为本申请实施例提供的一种电子设备的结构示意图；图2为本申请实施例提供的一种软件架构示意图；图3为本申请实施例提供的一组网络架构示意图；图4A-4B为本申请实施例提供的一组界面示意图；图5为本申请实施例提供的一种网页显示方法的流程示意图；图6A-6E为本申请实施例提供的有一组界面示意图；图7为本申请实施例提供的一种图片文件类型的结构示意图；图8为本申请实施例提供的另一种图片文件类型的结构示意图；图9为本申请实施例提供的另一种图片文件类型的结构示意图；图10为本申请另一实施例提供的一种网页显示方法的流程示意图；图11为本申请另一实施例提供的一种图片文件类型的结构示意图；图12为本申请另一实施例提供的一种网页显示方法的交互架构图。具体实施方式下面将结合附图对本申请实施例中的技术方案进行清除、详尽地描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；文本中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，另外，在本申请实施例的描述中，“多个”是指两个或多于两个。以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。图1示出了电子设备100的结构示意图。下面以电子设本文档来自技高网...

【技术保护点】
1.一种网页显示方法，其特征在于，包括：电子设备获取第一网页中图片所处图片服务器的地址信息；所述电子设备根据所述图片服务器的地址信息，从所述图片服务器获取第一指示信息；所述第一指示信息用于指示所述图片的尺寸，所述第一指示信息的数据量小于所述图片的数据量；所述电子设备构建所述图片的占位图，所述图片的占位图的尺寸与所述第一指示信息指示的尺寸相同；所述电子设备显示所述第一网页，所述第一网页中所述图片的显示区域中显示有所述图片的占位图。

【技术特征摘要】
1.一种网页显示方法，其特征在于，包括：电子设备获取第一网页中图片所处图片服务器的地址信息；所述电子设备根据所述图片服务器的地址信息，从所述图片服务器获取第一指示信息；所述第一指示信息用于指示所述图片的尺寸，所述第一指示信息的数据量小于所述图片的数据量；所述电子设备构建所述图片的占位图，所述图片的占位图的尺寸与所述第一指示信息指示的尺寸相同；所述电子设备显示所述第一网页，所述第一网页中所述图片的显示区域中显示有所述图片的占位图。2.根据权利要求1所述的方法，其特征在于，在所述电子设备显示所述第一网页之前，所述方法还包括：所述电子设备获取所述图片的显示区域的宽度信息；所述电子设备按照第一比例，调整所述图片的占位图在所述图片的显示区域中的显示尺寸，其中，所述第一比例为所述图片的显示区域的宽度与所述图片的占位图的宽度之比，所述图片的占位图的显示宽度与所述图片的显示区域的宽度相同。3.根据权利要求1所述的方法，其特征在于，所述第一指示信息为所述图片内的第一数据，所述第一数据为所述图片的第1个数据单元至第L个数据单元之间的数据，L为大于1的正整数；其中，所述数据单元包括：比特或字节。4.根据权利要求3所述的方法，其特征在于，所述L根据所述图片的文件类型确定。5.根据权利要求1所述的方法，其特征在于，所述电子设备根据所述图片服务器的地址信息，从所述图片服务器获取第一指示信息，包括：所述电子设备判断第一网页中是否包括有所述图片的尺寸信息，若否，则根据所述图片服务器的地址信息，从所述图片服务...

【专利技术属性】
技术研发人员：王辉，连志鸿，刘耀明，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：广东,44