【技术实现步骤摘要】
本专利技术涉及互联网领域，尤其涉及一种前端网页的图片加载方法、装置、电子设备及存储介质。
技术介绍
1、在现代互联网应用中，网页中的图片加载是耗时的过程。相关技术中，静态图片的加载是通过http协议完成的，浏览器通过http请求发送给服务器，请求对应图片的url，服务器接收到请求后，会返回包含图片数据的http响应，浏览器解析响应并加载图片，然后将其显示在网页上
2、但是，上述方法会增加页面的加载时间，特别是对于大尺寸或高分辨率的图片，可能导致用户等待时间过长，影响用户体验，并且每次加载页面时，浏览器都需要发送http请求来获取图片，对于包含多个图片的页面，这将导致网络带宽的消耗增加。
技术实现思路
1、本专利技术提供了一种前端网页的图片加载方法、装置、电子设备及存储介质，以解决加载速度慢、带宽消耗大的技术问题。
2、第一方面，本专利技术提供了一种前端网页的图片加载方法，包括：获取前端的设备信息、网络信息以及前端网页的图片需求信息；根据所述设备信息、网络信息以及前端网页的图片需求信息确定目标图片信息；根据所述目标图片信息调整图片；在前端网页中加载并显示调整后的图片。
3、在一些实施例中，所述设备信息至少包括以下一种：屏幕尺寸、分辨率；所述网络信息至少包括以下一种：网络带宽、网络稳定度；所述前端网页的图片需求信息至少包括以下一种：图片显示尺寸、图片显示格式、图片显示方式；所述目标图片信息至少包括以下一种：目标显示尺寸、目标显示格式、目前显示分辨率以
4、在一些实施例中，所述图片显示方式至少包括第一图片显示方式和第二图片显示方式，所述第一图片显示方式是指当图片位于前端的当前视口时进行图片显示，第二图片显示方式是指在接收到用户操作信号后进行图片显示；则所述根据所述网络信息和图片显示方式中的至少一项确定所述目标加载方式，包括：在网络带宽或网络稳定度低于预设阈值且为第一图片显示方式的情况下，确定所述目标加载方式为加载压缩格式图片或者延迟加载图片，所述延迟加载图片是指对位于前端的当前视口中的图片进行加载，对不处于当前视口中的图片不进行加载；在网络带宽或网络稳定度低于预设阈值且为第二图片显示方式的情况下，确定所述目标加载方式为预先加载方式，所述预先加载方式是指对具有交互需求的图片进行预先加载。
5、在一些实施例中，所述根据所述目标图片信息调整图片；在前端网页中加载并显示调整后的图片，包括：调整所述图片为所述目标显示尺寸或目标显示格式；基于所述目标加载方式在所述前端网页中加载并显示调整后的图片。
6、在一些实施例中，在所述目标加载方式为延迟加载方式的情况下，所述基于所述目标加载方式在所述前端网页中加载并显示调整后的图片，包括：基于预设占位图像初始化所述前端网页中的图片所在的图片容器；响应于前端网页的滚动操作，检测图片容器是否进入当前视口范围内，并在进入当前视口范围内的情况下，触发图片进行加载。
7、第二方面，本专利技术提供一种前端网页的图片加载装置，包括：获取模块，用于获取前端的设备信息、网络信息以及前端网页的图片需求信息；确定模块，用于根据所述设备信息、网络信息以及前端网页的图片需求信息确定目标图片信息；调整模块，用于根据所述目标图片信息调整图片；加载模块，用于在前端网页中加载并显示调整后的图片。
8、在一些实施例中，所述设备信息至少包括以下一种：屏幕尺寸、分辨率；所述网络信息至少包括以下一种：网络带宽、网络稳定度；所述前端网页的图片需求信息至少包括以下一种：图片显示尺寸、图片显示格式、图片显示方式；所述目标图片信息至少包括以下一种：目标显示尺寸、目标显示格式、目前显示分辨率以及目标加载方式；则所述确定模块，具体用于以下至少一项：根据所述屏幕尺寸、图片显示尺寸以及网络信息中的至少一项确定所述目标显示尺寸；根据所述图片显示格式确定所述目标显示格式；根据所述分辨率确定所述目标显示分辨率；根据所述网络信息和图片显示方式中的至少一项确定所述目标加载方式。
9、第三方面，本专利技术提供一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；存储器，用于存放计算机程序；处理器，用于执行存储器上所存放的程序时，实现第一方面任一项所述的前端网页的图片加载方法的步骤。
10、第四方面，本专利技术提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如第一方面任一项所述的前端网页的图片加载方法的步骤。
11、本专利技术实施例提供的前端网页的图片加载方法、装置、电子设备及存储介质，通过获取前端的设备信息、网络信息以及前端网页的图片需求信息；根据所述设备信息、网络信息以及前端网页的图片需求信息确定目标图片信息；根据所述目标图片信息调整图片；在前端网页中加载并显示调整后的图片；即本专利技术实施例通过根据用户设备和网络环境的不同，自动调整图片加载方式，提高加载速度和节省带宽，通过这种自适应调整，保证不同设备和网络环境下的用户体验一致性。
本文档来自技高网...【技术保护点】
1.一种前端网页的图片加载方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述设备信息至少包括以下一种：屏幕尺寸、分辨率；所述网络信息至少包括以下一种：网络带宽、网络稳定度；所述前端网页的图片需求信息至少包括以下一种：图片显示尺寸、图片显示格式、图片显示方式；所述目标图片信息至少包括以下一种：目标显示尺寸、目标显示格式、目前显示分辨率以及目标加载方式；
3.根据权利要求2所述的方法，其特征在于，所述图片显示方式至少包括第一图片显示方式和第二图片显示方式，所述第一图片显示方式是指当图片位于前端的当前视口时进行图片显示，第二图片显示方式是指在接收到用户操作信号后进行图片显示；则所述根据所述网络信息和图片显示方式中的至少一项确定所述目标加载方式，包括：
4.根据权利要求3所述的方法，其特征在于，所述根据所述目标图片信息调整图片；在前端网页中加载并显示调整后的图片，包括：
5.根据权利要求4所述的方法，其特征在于，在所述目标加载方式为延迟加载图片的情况下，所述基于所述目标加载方式在所述前端网页中加载并显示调整后的图片，包
6.一种前端网页的图片加载装置，其特征在于，包括：
7.根据权利要求6所述的装置，其特征在于，所述设备信息至少包括以下一种：屏幕尺寸、分辨率；所述网络信息至少包括以下一种：网络带宽、网络稳定度；所述前端网页的图片需求信息至少包括以下一种：图片显示尺寸、图片显示格式、图片显示方式；所述目标图片信息至少包括以下一种：目标显示尺寸、目标显示格式、目前显示分辨率以及目标加载方式；
8.根据权利要求7所述的装置，其特征在于，所述图片显示方式至少包括第一图片显示方式和第二图片显示方式，所述第一图片显示方式是指当图片位于前端的当前视口时进行图片显示，第二图片显示方式是指在接收到用户操作信号后进行图片显示；则所述确定模块，具体用于：
9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-5任一项所述的前端网页的图片加载方法的步骤。
...【技术特征摘要】
1.一种前端网页的图片加载方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述设备信息至少包括以下一种：屏幕尺寸、分辨率；所述网络信息至少包括以下一种：网络带宽、网络稳定度；所述前端网页的图片需求信息至少包括以下一种：图片显示尺寸、图片显示格式、图片显示方式；所述目标图片信息至少包括以下一种：目标显示尺寸、目标显示格式、目前显示分辨率以及目标加载方式；
3.根据权利要求2所述的方法，其特征在于，所述图片显示方式至少包括第一图片显示方式和第二图片显示方式，所述第一图片显示方式是指当图片位于前端的当前视口时进行图片显示，第二图片显示方式是指在接收到用户操作信号后进行图片显示；则所述根据所述网络信息和图片显示方式中的至少一项确定所述目标加载方式，包括：
4.根据权利要求3所述的方法，其特征在于，所述根据所述目标图片信息调整图片；在前端网页中加载并显示调整后的图片，包括：
5.根据权利要求4所述的方法，其特征在于，在所述目标加载方式为延迟加载图片的情况下，所述基于所述目标加载方式在所述前端网页中加载并显示调整后的...
【专利技术属性】
技术研发人员：蒋海，王娆，
申请(专利权)人：布比北京网络技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。