切换背景图片的方法及其装置、计算机存储介质、电子终端与流程

1.本技术涉及数据处理技术领域，具体涉及一种切换背景图片的方法及其装置、计算机存储介质、电子终端。


背景技术：

2.在应用程序中通常给一些目标对象的显示配置了风格切换功能，以实现选择不同的风格展示不同ui样式的背景图片。但是，在实现不同背景图片的切换的过程中，由于存在背景图片的缺失，由此导致出现了页面闪动。


技术实现要素：

3.本技术实施例提供一种切换背景图片的方法及其装置、计算机存储介质、电子终端，用以克服或者缓解现有技术中存在的上述技术问题。
4.本技术采用的技术方案为：
5.一种切换背景图片的方法，其包括：
6.基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；
7.将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片。
8.可选地，所述基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器之前，包括：
9.将所述下一图片预先缓存到在所述页面中创建的所述第一容器中。
10.可选地，所述将所述下一图片预先缓存到在所述页面中创建的所述第一容器中，包括：
11.从所述页面获取所述下一图片的链接地址；
12.根据所述下一图片的链接地址，将所述下一图片预先缓存到所述隐藏状态的第一容器中。
13.可选地，所述从所述页面获取所述下一图片的链接地址，包括：从所述页面的js对象或者js数组中获取所述下一图片的链接地址。
14.可选地，所述方法还包括：通过js代码将所述下一图片的链接地址与所述当前图片的链接地址存储在同一js对象或者js数组中；
15.所述从所述页面获取所述下一图片的链接地址，包括：从所述js对象或者js数组获取所述下一图片的链接地址。
16.可选地，所述根据所述下一图片的链接地址，将所述下一图片预先缓存到所述隐藏状态的第一容器中，包括：
17.将获取到的所述下一图片的链接地址赋值给所述页面的指定页面元素，以将所述
下一图片预先缓存到所述隐藏状态的第一容器中。
18.可选地，所述指定页面元素为div元素或者span元素；所述将获取到的所述下一图片的链接地址赋值给所述页面的指定页面元素，包括：将获取到的所述下一图片的链接地址赋值为所述div元素或者span元素的background-image属性。
19.可选地，若所述背景图片的可选图片的数量大于或者等于两套，则所述方法还包括：将包括所述当前图片和所述下一图片外的可选图片逐套预先存储到在所述页面中创建的对应容器中，其中，一套可选图片对应一个容器，且该容器设置为隐藏状态。
20.一种切换背景图片的装置，其包括：
21.容器确定单元，用于基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；
22.状态切换单元，用于将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片。
23.一种计算机存储介质，所述计算机存储介质上存储有计算机可执行程序，所述计算机可执行程序被运行以实施本技术实施例任一所述切换背景图片的方法。
24.一种电子终端，所述电子终端包括存储器以及处理器，所述存储器上用于存储计算机可执行程序，所述处理器用于运行所述计算机可执行程序以实施本技术实施例任一所述切换背景图片的方法。
25.本技术实施例，通过基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片,从而实现了在不同背景图片的切换的过程中，无须对下一图片进行加载而导致存在背景图片的缺失，从而避免了页面闪动。
附图说明
26.图1为本技术实施例的应用场景示意图；
27.图2为本技术实施例一种切换背景图片的方法流程示意图；
28.图3为本技术实施例将所述下一图片预先缓存到在所述页面中创建的所述第一容器的示意图；
29.图4为本技术实施例一种切换背景图片的装置的结构示意图；
30.图5为本技术实施例中电子终端的结构示意图。
具体实施方式
31.为使本技术要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具体实施例进行详细描述。
32.本技术实施例，通过基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为
隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片,从而实现了在不同背景图片的切换的过程中，无须对下一图片进行加载而导致存在背景图片的缺失，从而避免了页面闪动。
33.图1为本技术实施例的应用场景示意图；如图1所示，在所述应用场景中设置有后台服务器101以及前端的应用程序，后台服务器至少用于存储所述应用程序进行背景图片的切换时所需的所有可选背景图片，所述前端的应用程序可以安装在电子终端102上，以运行所述应用程序，在使用所述应用程序的过程中，基于将所述应用程序中目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，在应用程序的页面中确定存储有所述下一图片并设置为隐藏状态的第一容器，将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片，从而无须在切换的过程中，去后台服务器请求所述下一图片，从而实现背景图片从当前图片切换到下一图片，并保证不会出现页面闪动。此处，当前图片和下一图片是以背景切换的过程对背景图片进行区分，并非特指。
34.所述后台服务器可以为独立的服务器，或者服务器集群中的一服务器。
35.图2为本技术实施例一种切换背景图片的方法流程示意图；如图2所示，其包括：
36.s201、基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；
37.可选地，在一具体应用场景中，所述目标对象也可以为电子名片，比如为销售人员的电子名片。当然，在其他应用场景中，所述目标对象也可以是应用程序的页面中其他展示内容。
38.可选地，在一具体应用场景中，所述背景图片具体可以加载在h5页面上进行显示，但是需要说明的是，此处h5页面仅仅是示例，并非唯一性限定。
39.可选地，所述切换指令具体可以通过手势动作产生，或者光标操作产生，比如具体通过操作在页面中配置的控件来产生所述切换指令。
40.可选地，在一具体应用场景中，所述背景图片的大小和格式不做特别限定，只要适用于应用场景的需求即可。
41.s202、将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片。
42.可选地，在本实施例或者其他实施例中，所述步骤s201基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器之前，还可以包括：将所述下一图片预先缓存到在所述页面中创建的所述第一容器中。所述第一容器又可以称之为第一container，类似地，所述第二容器又可以称之第二container。
43.可选地，在一具体应用场景中，将所述下一图片预先缓存到在所述页面中创建的所述第一容器中，比如为：在产生所述背景图片切换指令之前，将所述下一图片预先缓存到在所述页面中创建的所述第一容器中；或者，将存储所述当前图片的第二容器从隐藏状态切换为显示状态之前；或者，将所述当前图片预先缓存到在所述页面中创建的所述第二容器中之后，将存储所述当前图片的第二容器从隐藏状态切换为显示状态之前执行。
44.但是，此处，需要说明的是，上述将所述下一图片预先缓存到在所述页面中创建的所述第一容器中的时间点的选择仅仅示例，并非唯一性限定，只要是在产生所述背景图片切换指令时，所述下一图片预先缓存到在所述页面中创建的所述第一容器中即可，从而无须在切换过程中执行所述下一图片的加载，只需要修改所述第一容器的状态为显示状态。此处，需要说明的是，隐藏状态达到不显示背景图片的目的，显示状态达到显示背景图片的目的。
45.可选地，在一具体应用场景中，所述将所述下一图片预先缓存到在所述页面中创建的所述第一容器中，如图3所示，其可以包括：
46.s200a、从所述页面获取所述下一图片的链接地址；
47.可选地，在一具体应用场景中，通过所述下一图片的链接地址可以访问后台服务器，以从所述后台服务器获取所述下一图片，以预先加载到所述第一容器中。所述下一图片的链接地址的格式不做特别限定，只要可以适用于应用场景即可。
48.可选地，所述从所述页面获取所述下一图片的链接地址，包括：从所述页面的js对象或者js数组中获取所述下一图片的链接地址。
49.可选地，所述js对象或者所述js数组可以通过js代码创建，以通过js代码将所述下一图片的链接地址存储到所述js对象或者js数组中。
50.可选地，所述当前图片的链接地址也可以存储到所述js对象或者js数组，从而使得通过访问同一js对象或者js数组，即可获取到所述当前图片的链接地址或者所述下一图片的链接地址，从而提高数据访问的效率，降低算法设计的复杂度。
51.为此，所述方法还可以包括：通过js代码将所述下一图片的链接地址与所述当前图片的链接地址存储在同一js对象或者js数组中；
52.所述从所述页面获取所述下一图片的链接地址，包括：从所述js对象或者js数组获取所述下一图片的链接地址。
53.通过js代码将所述下一图片的链接地址与所述当前图片的链接地址存储在同一js对象或者js数组中的执行节点，比如在上述步骤s201之前执行。
54.可选地，当包括多套背景图片时，可以将所述的背景图片(包括当前图片、下一图片以及其他图片)的链接地址全部存储到同一js对象或者js数组，即可从同一js对象或者js数组获取所有背景图片的链接地址都即可，从而提高数据访问的效率，降低算法设计的复杂度。比如，通过轮询的方式访问所述同一js对象或者js数组，从而逐套将背景图片预先存储到对应的容器中即可，其中，一套背景图片对应一个容器(即container)。
55.s200b、根据所述下一图片的链接地址，将所述下一图片预先缓存到所述隐藏状态的第一容器中。
56.可选地，在一具体应用场景中，在步骤s200b中，通过对所述下一图片的链接地址进行解析，从而确定出所述下一图片在后台服务器上的存储目录，直接从所述存储目录调取所述下一图片，从所述后台服务器下载到所述第一容器中。
57.可选地，在一具体应用场景中，所述根据所述下一图片的链接地址，将所述下一图片预先缓存到所述隐藏状态的第一容器中，包括：将获取到的所述下一图片的链接地址赋值给所述页面的指定页面元素，以将所述下一图片预先缓存到所述隐藏状态的第一容器中，从而快速地实现了所述下一图片的预先缓存。
58.可选地，所述指定页面元素为div元素或者span元素；所述将获取到的所述下一图片的链接地址赋值给所述页面的指定页面元素，包括：将获取到的所述下一图片的链接地址赋值为所述div元素或者span元素的background-image属性。
59.此处需要说明的是，所述指定页面元素为div元素或者span元素仅仅为示例，并未为唯一性限定。
60.可选地，若所述背景图片的可选图片的数量大于或者等于两套，则所述方法还包括：将包括所述当前图片和所述下一图片外的可选图片逐套预先存储到在所述页面中创建的对应容器中，其中，一套可选图片对应一个容器，且该容器设置为隐藏状态，从而背景图片的切换过程中，直接通过修改单独的某个容器为显示状态或者隐藏状态，快速地实现背景图片的切换。
61.图4为本技术实施例一种切换背景图片的装置的结构示意图；如图4所示，其包括：
62.容器确定单元401，用于基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器；
63.状态切换单元402，用于将所述第一容器从所述隐藏状态切换为显示状态，且将存储所述当前图片的第二容器从显示状态切换为隐藏状态，以将所述目标对象的背景图片从所述当前图片切换为所述下一图片。
64.可选地，所述装置还包括：预存单元，用于在基于将目标对象的背景图片从当前图片切换为下一图片的背景图片切换指令，确定存储有所述下一图片并设置为隐藏状态的第一容器之前，将所述下一图片预先缓存到在所述页面中创建的所述第一容器中。
65.可选地，所述预存单元包括：
66.地址获取子单元，用于从所述页面获取所述下一图片的链接地址；
67.预存子单元，用于根据所述下一图片的链接地址，将所述下一图片预先缓存到所述隐藏状态的第一容器中。
68.可选地，所述地址获取子单元具体用于从所述页面的js对象或者js数组中获取所述下一图片的链接地址。
69.可选地，所述装置还包括地址存储单元，用于通过js代码将所述下一图片的链接地址与所述当前图片的链接地址存储在同一js对象或者js数组中；
70.所述从所述页面获取所述下一图片的链接地址，包括：从所述js对象或者js数组获取所述下一图片的链接地址。
71.可选地，所述预存子单元具体用于将获取到的所述下一图片的链接地址赋值给所述页面的指定页面元素，以将所述下一图片预先缓存到所述隐藏状态的第一容器中。
72.可选地，所述指定页面元素为div元素或者span元素；所述预存子单元具体用于将获取到的所述下一图片的链接地址赋值为所述div元素或者span元素的background-image属性。
73.可选地，若所述背景图片的可选图片的数量大于或者等于两套，则所述预存单元具体用于将包括所述当前图片和所述下一图片外的可选图片逐套预先存储到在所述页面中创建的对应容器中，其中，一套可选图片对应一个容器，且该容器设置为隐藏状态。
74.本技术实施例还提供一种计算机存储介质，所述计算机存储介质上存储有计算机可执行程序，所述计算机可执行程序被运行以实施本技术实施例任一所述切换背景图片的
方法。
75.图5为本技术实施例中电子终端的结构示意图；如图5所示，电子终端包括：存储器501以及处理器502，所述存储器上存储有计算机可执行程序，所述处理器用于运行所述计算机可执行程序以实施本技术任一实施例中的任一所述切换背景图片的方法。
76.以上所述实施例，仅为本技术的具体实施方式，用以说明本技术的技术方案，而非对其限制，本技术的保护范围并不局限于此，尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本技术实施例技术方案的精神和范围，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应所述以权利要求的保护范围为准。