基于用户行为的交互式图片加载方法、系统及存储介质与流程

1.本发明涉及界面交互技术领域，特别涉及一种基于用户行为的交互式图片加载方法、系统及存储介质。


背景技术：

2.在浏览网页或小程序页面时，经常充斥着大量图片、视频等媒体内容，比如点餐软件、电商软件等等的商品列表、详情页，用户在浏览商品时或许只对某几个商品感兴趣，大部分图片都是一扫而过，并不会仔细观看。为了提高加载速度或页面流畅度，目前通常采用以下方式提升用户体验：
3.1.预加载方式，是在页面加载时预先加载图片，可以在用户点击链接或滚动页面时立即显示图片，提高用户体验。该方式虽然图片显示速度快，页面加载速度慢，且可能会加载过多用户并不关心的内容，浪费大量网络和计算机资源。
4.2.延迟加载方式，也称为懒加载，它可以让页面上的图片在用户滚动到图片位置时才加载。该方式虽然可以减少页面的加载时间，但由于加载延迟，用户滚动到图片位置时，如果图片过大或网络较差时页面将产生空白，用户需要中断浏览行为等待图片加载完成。如果页面滚动速度快，当用户滚动到页面底部观看其他内容时，上面的图片处陆续加载出来，页面高度逐渐被图片撑开，产生页面跳动，影响用户浏览体验，且用户不关心的图片只要在滚动页面过程中经过了可见区域，也会被加载，避免不了对网络和计算机资源的浪费。
5.3.图片压缩方式，是一种以空间换时间的方式。无损压缩虽然能保持质量，但压缩效果有限，而有损压缩显然是以减少图片尺寸、像素等牺牲图片质量的方式，将图片大小减少，虽然可提升页面和图片的加载速度，但牺牲了图片质量，损失一些细节、颜色等，会影响用户的观赏体验。
6.4.响应式图片方式，是指根据设备屏幕大小动态调整图片尺寸的技术，仍能以上述三种方式优化继续，但仍避免不了上述三种方式的缺点，甚至对某些设备来说会还可能会导致图片不清晰或变形的情况。
7.综上，目前还没有能够同时兼顾提高页面加载速度和用户观赏体验以及减少网络和计算机资源开销的图片加载方法。


技术实现要素：

8.为了解决上述问题，本发明提供了一种基于用户行为的交互式图片加载方法、系统及存储介质，该方法结合了图片压缩方式和延迟加载方式的优点，增加了基于用户行为分析的加载阻断和断点续传能力，提升了页面流畅度和用户观赏体验，减少了不必要的网络和计算机资源开销。
9.本发明通过如下方案来实现：一种基于用户行为的交互式图片加载方法，包括步骤：
10.s1、准备工作：
11.为页面所涉及的每个图片对象准备高、低两种质量的图像，并将页面设置为默认加载并呈现低质量图像；
12.对每个图片对象绑定以图片对象进入可视区域为触发条件的第一事件、以及以图片对象从可视区域离开为触发条件的第二事件；
13.s2、在用户浏览页面的过程中，以每个图片对象为单位按照如下逻辑进行操作：
14.在所述第一事件被触发时，异步加载对应的高质量图像，同时缓存已加载数据；
15.在所述第二事件被触发时，停止对应所述第一事件的异步加载操作；
16.在所述第一事件再次被触发时，在前一次加载的断点处继续异步加载，同时合并缓存所有已加载数据；
17.当所述高质量图像全部加载完毕时，替换对应的低质量图像并将所述高质量图像呈现在页面上。
18.本发明基于用户行为的交互式图片加载方法的进一步改进在于，当所述高质量图像全部加载完毕时，解除对应图片对象与所述第一事件和所述第二事件的绑定。
19.本发明基于用户行为的交互式图片加载方法的进一步改进在于，在用户浏览页面的过程中，对进入可视区域的所有图片对象同步执行所述步骤s2。
20.本发明基于用户行为的交互式图片加载方法的进一步改进在于，在将所述高质量图像呈现在页面上之后，根据对应图片对象的使用情况对相应异步加载过程中产生的缓存数据选择适配的删除方案。
21.本发明基于用户行为的交互式图片加载方法的进一步改进在于，对使用率低的图片对象选择即时删除的删除方案，对使用率高的图片对象选择页面级删除或程序级删除或不删除的删除方案。
22.本发明基于用户行为的交互式图片加载方法的进一步改进在于，异步加载过程中产生的缓存数据包括加载信号控制数据、已加载内容大小以及已加载数据。
23.本发明还提供了一种基于用户行为的交互式图片加载系统，用于实现如上任一项所述的基于用户行为的交互式图片加载方法，所述系统包括：
24.用于针对图片对象存储高质量图像和低质量图像的图片服务器；
25.用于监听图片对象是否进入或离开可视区域的图片监听器；以及，
26.用于在图片对象进入可视区域时异步加载并缓存所述高质量图像、且在图片对象离开可视区域时停止继续异步加载的图片加载器，所述图片加载器与所述图片服务器和所述图片监听器连接。
27.本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被执行时实现如上任一项所述的基于用户行为的交互式图片加载方法。
28.本发明结合了图片压缩方式和延迟加载方式的优点，增加了基于用户行为分析的加载阻断和断点续传能力，可达到不打断用户浏览行为、同时可减少不必要的网络和计算机资源开销、提升页面流畅度和用户体验的有益效果。
附图说明
29.图1示出了本发明基于用户行为的交互式图片加载方法的流程图。
30.图2示出了本发明实施例的页面加载后初始状态互示意图。
31.图3示出了本发明实施例的与用户产生交互行为后的页面状态示意图。
32.图4示出了本发明基于用户行为的交互式图片加载系统的原理框图。
具体实施方式
33.为了解决现有的页面图片加载方法无法兼顾页面加载速度、用户体验及资源占用的问题，本发明提供了一种基于用户行为的交互式图片加载方法、系统及存储介质。下面以具体实施例结合附图对该基于用户行为的交互式图片加载方法、系统及存储介质作进一步说明。
34.参阅图1至图3所示，一种基于用户行为的交互式图片加载方法，包括步骤：
35.步骤s1、准备工作：1.1、为页面所涉及的每个图片对象准备高、低两种质量的图像，并将页面设置为默认加载并呈现低质量图像。以保障页面的加载速度和流畅度，同时，以低质量图片预先呈现给用户，避免了页面出现空白的现象，提高用户体验。1.2、对每个图片对象绑定以图片对象进入可视区域为触发条件的第一事件、以及以图片对象从可视区域离开为触发条件的第二事件。该可视区域指的是用户浏览页面时呈现在用户视野的区域，如手机或电脑等图片浏览器的图形用户界面。
36.步骤s2、在用户浏览页面的过程中，以每个图片对象为单位按照如下逻辑进行操作：2.1、在图片对象进入可视区域时触发该第一事件，该第一事件被触发后，则开始异步加载对应的高质量图像，同时缓存已加载数据。2.2、在图片对象离开可视区域时触发该第二事件，该第二事件被触发后，则取消对应高质量图像的继续加载请求，即停止对应该第一事件的异步加载操作。2.3、如果已暂停加载高质量图像的图片对象再次进入可视区域(如用户返回图片位置再次查看)时，该第一事件将再次被触发，则在前一次加载的断点处开始继续异步加载剩余的高质量图像数据，同时合并缓存所有已加载数据。2.4、当该高质量图像的数据全部加载完毕后，将缓冲的全部加载数据转换为高质量图像替换掉对应的低质量图像并展示在页面上。上述的第2.2步与第2.3步可能反复多次，第2.4步每次加载后的数据需要与前面所有已加载数据合并存储。
37.作为一较佳实施方式，在用户浏览页面的过程中，对进入可视区域的所有图片对象同步执行该步骤s2。如图2或图3所示，同时有3个图片对象进入可视区域，则同时对该3个图片对象执行上述步骤s2。在加载过程中显示低质量图像，不会出现空白，且同时加载3个图片会加快高质量图像的呈现速度。
38.作为一较佳实施方式，当该高质量图像全部加载完毕时，解除对应图片对象与该第一事件和该第二事件的绑定。使得相应图片对象下次进入可视区域时，无需再进行高质量图像的异步加载操作，进一步地，在离开可视区域时，也无需进行停止对应第一时间的一步加载操作的步骤。避免了无效指令。
39.为了减少不必要的网络和计算机资源开销，本方法在将该高质量图像呈现在页面上之后，还需对一步加载过程中产生的缓存数据进行删除。具体地，根据对应图片对象的使用情况对相应异步加载过程中产生的缓存数据选择适配的删除方案。其中，该异步加载过
程中产生的缓存数据包括加载信号控制数据、已加载内容大小以及已加载数据等。
40.具体选择方法为：对使用率低的图片对象，如浏览过一次之后大概率不会再次浏览的图片，选择即时删除的删除方案，即高质量图像呈现在页面上之后，立即删除相应的缓存数据；对使用率高的图片对象选择页面级删除或会话级(session级)删除或不删除的删除方案。该页面级删除指的是在一个浏览页面(如一个浏览链接)关闭时再进行删除，该会话级删除指的是在一个浏览网站(可包括多个浏览页面)关闭时再进行删除，该不删除指的是永久缓存，一直保存。上述三种级别的删除方案也可以根据使用情况进一步设置匹配方案，如：对于因某种原因会反复浏览的图片对象，可以选择页面级删除；对于同一个图片在不同页面都会使用的图片对象，可以选择会话级删除；对于网站首页固定不变的图片对象，用户每次访问都会看到，可以选择不删除。当然，上述仅列出了一些较佳实施例，实际的删除方案不限于上述几种，还可以采用不主动删除、设置过期时间删除等其他删除方案，具体取决于使用场景和选用的本地存储模型。
41.基于上述的交互式图片加载方法，提供一种计算机可读存储介质，用以存储计算机程序，该计算机程序被执行时可实现如上任一项所述的基于用户行为的交互式图片加载方法。
42.基于上述的交互式图片加载方法，提供一种基于用户行为的交互式图片加载系统，用于实现如上任一项所述的基于用户行为的交互式图片加载方法。
43.该系统包括：用于针对图片对象存储高质量图像和低质量图像的图片服务器；用于监听图片对象是否进入或离开可视区域的图片监听器；以及，用于在图片对象进入可视区域时异步加载并缓存该高质量图像、且在图片对象离开可视区域时停止继续异步加载的图片加载器，该图片加载器与该图片服务器和该图片监听器连接。
44.下面以实施例结合附图对该系统作具体说明。参阅图4所示：
45.该图片监听器采用intersectionobserver接口，该接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口交叉状态的方法，负责监听目标图片对象是否进入或离开可视区域。该图片监听器除了采用intersectionobserver接口外，还可以采用其他方式来达到监听目的，如普遍使用的监听页面滚动的高度方法，根据图片在页面中的位置实时判断图片是否滚动到了可视区域等。
46.该图片加载器包括加载器imageloader接口、用于本地缓存的本地缓存管理器local cache以及用于执行/中断请求的fetch api。其中，
47.fetch接口结合abortcontroller接口使用可以控制请求中断。fetch api提供了一个javascript接口，用于访问和操纵http管道的一些具体部分，例如请求和响应。它还提供了一个全局方法，以提供一种简单合理的方式来跨网络异步获取资源。通过传递给该方法一个实例对象，该对象可以根据需要处理dom请求通信，既可以建立通信，也可以终止通信，abortcontroller接口表示一个控制器对象，允许根据需要中止一个或多个图片加载请求。该fetch api也仅为一较佳实施例，除了使用fetch api外，还可以使用常见的ajax请求使用的xmlhttprequest等其他方式。
48.imageloader接口用于加载高质量图像资源，使用fetch api来异步获取高质量图像。具体地，fetch api将获取到的http响应体传递给response body reader(响应体读取接口)，该接口从中分块读取数据流，并将数据块存储在本地存储设备，当整个高质量图像
内容读取完后，该接口将图片显示为高质量图像(即高清图)，同时移除图片对象上的图片监听器并清理当前图片对象的本地存储的缓存数据(即前述的即时删除方案)。
49.本实施例的该系统的创建流程包括如下步骤：
50.1、在页面中的图片对象(如图4所示的image element)上设置高质量图像属性，如data-origin，属性值设置为高质量图像的网络地址。
51.2.创建本地缓存管理器(如图4所示的local cache)，用于对缓存进行保存、删除、读取。
52.3.定义图片加载器(如图4所示的imageloader)，其具体逻辑如下：
53.(1)获取传入图片对象上的data-origin属性值，所述属性值即当前图片的高质量图像的网络地址。
54.(2)从本地缓存中获取当前高质量图像的缓存数据，如果没有则先初始化缓存，使用数组变量(如chunks)保存已加载的数据，使用整数变量(如range)记录已读取的字节数。
55.(3)首先通过abortcontroller()构造函数来创建一个控制器(如controller)实例，并将该实例与当前高质量图像关联起来，然后通过abortcontroller.signal属性获取到它的关联对象abortsignal的引用。
56.(4)初始化fetch请求。当fetch请求初始化时，将abortsignal作为一个选项传递进入请求的选项对象中。这将signal和controller与fetch请求相关联，并且允许通过调用abortcontroller.abort()去中止它。在fetch请求头中，设置range参数，指定加载图片内容的哪个部分，以实现从上次加载中断位置继续读取剩余内容的功能。
57.(5)读取高质量图像内容：从fetch请求的响应体中可以获取readablestreamreader接口实例，readablestreamreader接口提供了一种异步读取数据流的方式。定义一个递归函数，如readimage()，该递归函数调用readablestreamreader接口提供的read()方法读取数据，并使用解构赋值获取done和value属性，将读取的数据块value添加到chunks数组中保存，同时更新已读取字节数range的值。如果done属性为flase，继续递归调用readimage()方法读取下一块数据。否则，则表示所有数据都已经读取完毕，结束递归。
58.(6)高质量图像被完全加载后，不再关心图片对象是否在可视区域，可通过第4步所述的方法移除当前图片对象上的图片监听器。
59.(7)图片渲染：将所有数据块转换为blob对象，然后通过url.createobjecturl()方法生成一个url，并将生成的url传给图片对象，并为图片对象设置一个渲染完成的回调函数，在回调函数中使用url.revokeobjecturl()方法释放生成的url，以减少内存占用。
60.(8)清理与加载高质量图像关联的本地缓存数据。
61.4.创建图片监听器，用于监听图片对象进入或离开可视区域，当图片进入可视区域时，调用图片加载器加载图像。当图片离开可视区域后，从本地缓存中读取当前高质量图像上的abortcontroller实例，如果存在则调用其abort()方法中断图片加载请求。
62.5.获取页面中所有存在data-origin属性的图片对象列表，使用第4步所述的方法对每个图片对象绑定进行监听。
63.实现上述步骤后，用户访问页面时，页面中的图片进入或离开可视区域时，将会触发相应逻辑。
64.本发明结合了图片压缩方式和延迟加载方式的优点，增加了基于用户行为分析的加载阻断和断点续传能力，可达到不打断用户浏览行为、同时可减少不必要的网络和计算机资源开销、提升页面流畅度和用户体验的有益效果。
65.以上结合附图实施例对本发明进行了详细说明，本领域中普通技术人员可根据上述说明对本发明做出种种变化例。因而，实施例中的某些细节不应构成对本发明的限定，本发明将以所附权利要求书界定的范围作为本发明的保护范围。

技术特征：
1.一种基于用户行为的交互式图片加载方法，其特征在于，包括步骤：s1、准备工作：为页面所涉及的每个图片对象准备高、低两种质量的图像，并将页面设置为默认加载并呈现低质量图像；对每个图片对象绑定以图片对象进入可视区域为触发条件的第一事件、以及以图片对象从可视区域离开为触发条件的第二事件；s2、在用户浏览页面的过程中，以每个图片对象为单位按照如下逻辑进行操作：在所述第一事件被触发时，异步加载对应的高质量图像，同时缓存已加载数据；在所述第二事件被触发时，停止对应所述第一事件的异步加载操作；在所述第一事件再次被触发时，在前一次加载的断点处继续异步加载，同时合并缓存所有已加载数据；当所述高质量图像全部加载完毕时，替换对应的低质量图像并将所述高质量图像呈现在页面上。2.如权利要求1所述的基于用户行为的交互式图片加载方法，其特征在于，当所述高质量图像全部加载完毕时，解除对应图片对象与所述第一事件和所述第二事件的绑定。3.如权利要求1所述的基于用户行为的交互式图片加载方法，其特征在于，在用户浏览页面的过程中，对进入可视区域的所有图片对象同步执行所述步骤s2。4.如权利要求1所述的基于用户行为的交互式图片加载方法，其特征在于，在将所述高质量图像呈现在页面上之后，根据对应图片对象的使用情况对相应异步加载过程中产生的缓存数据选择适配的删除方案。5.如权利要求4所述的基于用户行为的交互式图片加载方法，其特征在于，对使用率低的图片对象选择即时删除的删除方案，对使用率高的图片对象选择页面级删除或程序级删除或不删除的删除方案。6.如权利要求4所述的基于用户行为的交互式图片加载方法，其特征在于，异步加载过程中产生的缓存数据包括加载信号控制数据、已加载内容大小以及已加载数据。7.一种基于用户行为的交互式图片加载系统，其特征在于，用于实现如权利要求1至6任一项所述的基于用户行为的交互式图片加载方法，所述系统包括：用于针对图片对象存储高质量图像和低质量图像的图片服务器；用于监听图片对象是否进入或离开可视区域的图片监听器；以及，用于在图片对象进入可视区域时异步加载并缓存所述高质量图像、且在图片对象离开可视区域时停止继续异步加载的图片加载器，所述图片加载器与所述图片服务器和所述图片监听器连接。8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被执行时实现如权利要求1至6任一项所述的基于用户行为的交互式图片加载方法。

技术总结
本发明涉及一种基于用户行为的交互式图片加载方法、系统及存储介质，该方法包括步骤：为每个图片对象准备两种质量图像，将页面设置为默认加载并呈现低质量图像；对每个图片对象绑定以图片对象进入可视区域为触发条件的第一事件和以图片对象从可视区域离开为触发条件的第二事件；在用户浏览页面的过程中，以每个图片对象为单位按照如下逻辑进行操作：在第一事件被触发时，异步加载高质量图像并缓存已加载数据；在第二事件被触发时，停止异步加载操作；在第一事件再次被触发时，在前一次加载的断点处继续异步加载，同时合并缓存已加载数据；当高质量图像全部加载完毕时，替换低质量图像并呈现在页面上。该方法提升了页面流畅度，减少了资源开销。减少了资源开销。减少了资源开销。


技术研发人员：张文凯
受保护的技术使用者：上海非码网络科技有限公司
技术研发日：2023.05.15
技术公布日：2023/8/21