一种网页区块懒加载的方法和装置制造方法及图纸

本申请提供一种网页区块懒加载的方法和装置，其中方法包括：接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；将所述网页区块的容器的初始高度值发送至所述客户端，以使得客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。本申请避免了网页区块懒加载时的页面抖动。

Method and device for lazy loading web page block

The invention provides a method and a device for \lazy loading block, wherein the method includes: receiving a client web browsing request, the requested web page includes: lazy loading block; the container will be the initial\ block height value is sent to the client, the client set height value in container height the initial value, the initial height for page block block height; on receiving the client sends the block loading request, will send the \block information blocks to the client, so the client according to the information block loading the page block to the container, and loading after the\ block height of the block height. This application avoids web page lazy loading page jitter.

【技术实现步骤摘要】

本申请涉及计算机技术，特别涉及一种网页区块懒加载的方法和装置。
技术介绍
随着互联网的发展，网页作为承载内容的载体，使用范围越来越广。为了提升用户打开网页时的初始速度，目前很多网页采用HTML区块懒加载的技术，HTML区块即网页中一个HTML元素的内容，HTML元素相当于HTML区块的容器，在网页刚打开时区块并不会被加载，而是先加载区块的容器，该容器可以被设置为一固定高度值(但不是区块的真实高度，因为此时区块还没有被加载，无法获取到区块高度)，等到HTML元素进入到用户的视野时才开始加载HTML区块，并获取到区块的真实高度，将容器也设置为区块对应的高度值。但是，HTML区块被加载前后，容器高度是有差别的，比如容器最初的固定高度值与区块真实高度值不同，这将会造成HTML元素高度的突然变化，从用户看来，网页中的纵向滚动条的长度和位置都会变化，可以称为页面抖动，影响用户的体验；同时也使得对页面中区块的定位和导航变得更为复杂。
技术实现思路
有鉴于此，本申请提供一种网页区块懒加载的方法和装置，以避免网页区块懒加载时的页面抖动。具体地，本申请是通过如下技术方案实现的：第一方面，提供一种网页区块懒加载的方法，包括：接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；将所述网页区块的容器的初始高度值发送至所述客户端，以使得客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。第二方面，提供一种网页区块懒加载的方法，包括：向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；接收所述服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。第三方面，提供一种网页区块懒加载的装置，包括：请求接收模块，用于接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；容器发送模块，用于将所述网页区块的容器的初始高度值发送至所述客户端，以使得所述客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；内容发送模块，用于在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。第四方面，提供一种网页区块懒加载的装置，包括：请求发送模块，用于向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；容器加载模块，用于接收服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；内容加载模块，用于在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。本申请提供的网页区块懒加载的方法和装置，通过对懒加载区块在发送容器信息时将容器的高度设置为区块高度，使得在后续加载网页区块至容器时，区块加载前后的容器高度不会发生变化，从而避免了网页区块懒加载时的页面抖动。附图说明图1是本申请一示例性实施例示出的一种购物网站的页面；图2是本申请一示例性实施例示出的另一种购物网站的页面；图3是本申请一示例性实施例示出的网页区块加载系统；图4是本申请一示例性实施例示出的一种网页区块懒加载的方法流程图；图5是本申请一示例性实施例示出的一种网页区块懒加载的方法流程图；图6是本申请一示例性实施例示出的一种客户端和服务器的交互流程图；图7是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；图8是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；图9是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；图10是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图。具体实施方式这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。网页中可以包括多个HTML元素，而HTML元素相当于HTML区块的容器，HTML区块即HTML元素的内容。参见图1的示例，图1示例了某购物网站的页面，并且是显示了该网站中进入到用户视野的页面，如果用户滚动页面右侧的滚动条11，将可以继续看到进入视野的该网站的下一部分页面内容，比如5F男装。以图1为例，类似于3F或者4F所在的一块页面内容，可以称为HTML区块，例如区块12和区块13，需要说明的是，这两个区块只是示例，HTML区块的大小也可以比图1示例更大或更小。结合参见图2，可能该购物网站在初始打开时，图1中的页面并不是首先进入用户视野的页面，也就是在电脑浏览器中不会首先显示图1的页面，比如可以先显示1F和2F的内容，在滚动上述的滚动条11时才显示到3F或4F的内容。而如果区块12和区块13采用的是懒加载技术，那么即使通过滚动上述的滚动条11使得3F或4F进入到浏览器显示，也不会立刻加载其中的显示内容，而是如图2所示的，先显示3F或4F所占的位置。本实施例中，将图2示例的尚未加载网页内容的部分可以称为“容器”(也可以称为HTML元素)，当加载具体的页面内容后，才显示为图1示例的形式，本实施例可以将容器中的内容称为“网页区块”(或者，HTML区块)。需要说明的是，图2所示的3F或4F，在尚未进入浏览器视野区域时，就可以渲染容器。比如，用户可以点击“www.tmall.com”，首先从浏览器看到的是1F和2F的内容，而3F或4F此时尚未进入视野区域，但是已经渲染了3F或4F对应的容器，为图2示例的形式。当通过滚动条11将3F或4F提升到视野区域时，浏览器再加载网页区块，即加载容器中包含的内容，从而看到图1示例的形式。这就是网页区块的懒加载技术。网页区块在懒加载时，也是通过图3所示的系统实现的。如图3所示，该系统可以包括服务器31和客户端32，例如，服务器31可以存储有网页信息，比如图1所示的购物网站中的HTML区块(如，区块代码)都存储在服务器31，由服务器31将代码发送至客户端32进行显示。而客户端32可以通过浏览器解析网页代码显示网页。比如，结合图1或图2所示，购物网站的页面信息，包括容器和区块，都是由服务器31发送至客户端32进行加载。例如，在用户请求www.tmall.com时，对于懒加载的区块(例如3F和4F)，服务器31可以只将渲染容器所需的信息发送至客户端32，其中包括容器的预设高度值，比如图2所示的容器高度S，客户端32渲染容器并设置容器的高度为S。当容器所在的页面部位进入本文档来自技高网...

【技术保护点】
一种网页区块懒加载的方法，其特征在于，包括：接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；将所述网页区块的容器的初始高度值发送至所述客户端，以使得客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

【技术特征摘要】
1.一种网页区块懒加载的方法，其特征在于，包括：接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；将所述网页区块的容器的初始高度值发送至所述客户端，以使得客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。2.根据权利要求1所述的方法，其特征在于，在接收客户端发送的网页浏览请求之前，还包括：在接收到对网页的浏览请求时，将所述网页的网页信息发送至所述客户端，所述网页信息包括：懒加载的网页区块的区块信息、以及高度上报标识；所述高度上报标识用于指示所述客户端上报加载网页区块后获得的区块高度；接收所述客户端发送的网页区块的区块高度，并将所述网页区块的容器的初始高度值设置为所述区块高度。3.根据权利要求2所述的方法，其特征在于，所述将网页区块的容器的初始高度值设置为所述区块高度，包括：根据所述区块高度，设置所述网页区块的容器的样式高度值。4.根据权利要求2所述的方法，其特征在于，所述将网页区块的容器的初始高度值设置为所述区块高度，包括：将所述区块高度设置为所述网页区块的容器的自定义属性值。5.一种网页区块懒加载的方法，其特征在于，包括：向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；接收所述服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请
\t求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。6.根据权利要求5所述的方法，其特征在于，在向服务器发送网页浏览请求之前，还包括：向所述服务器发送对网页的浏览请求，并接收所述服务器返回的网页信息，所述网页信息包括：懒加载的网页区块的区块信息、以及高度上报标识；根据区块信息加载所述网页区块至容器，获得所述网页区块的区块高度；根据所述高度上报标识，将所述网页区块的区块高度发送至所述服务器，以使得所述服务器将所述网页区块的容器的初始高度值设置为所述区块高度。7.根据权利要求5所述的方法，其特征在于，接收所述服务器发送的网页区块的容器的初始高度值，并设置容器的高度为所述初始高度值，包括：所述初始高度值为根据所述网页区块的区块高度设置的样式高度值，根据所述样式高度值设置所述容器的高度。8.根据权利要求5所述的方法，其特征在于，接收所述服务器发送的网页区块的容器的初始高度值，并设置容器的高度为所述初始高度值，包括：所述初始高度值为根据所述网页区块的区块高度设置的自定义属性值，将所述自定义属性值转换为网页区块的样式高...

【专利技术属性】
技术研发人员：李鹏，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY