CN102779129B - 在网络浏览器上实现图片渐进渐出效果的方法和装置 - Google Patents

Abstract

一种在网络浏览器上实现图片渐进渐出效果的方法，包括以下步骤：在图片显示区域上方设置遮罩层；加载当前需显示的图片，将所述图片设置为可见；按照设定的时间间隔调整所述遮罩层的透明度。该方法通过调整遮罩层的透明度实现图片的渐进渐出效果，不会对图片造成损坏，有效改善了图片显示效果。此外，还提供了一种在网络浏览器上实现图片渐进渐出效果的装置。

Description

在网络浏览器上实现图片渐进渐出效果的方法和装置

【技术领域】

本发明涉及网络技术领域，尤其涉及一种在网络浏览器上实现图片渐进渐出效果的方法和装置。

【背景技术】

随着网络技术的发展，越来越多的浏览器可以实现图片渐进渐出效果，使得图片显示不会显得很突然。例如，传统的InternetExplorer浏览器可以通过自带的滤镜功能来实现图片渐进渐出效果。传统的支持在多类浏览器上实现图片渐进渐出的方法主要通过直接改变图片的透明度属性来实现。然而这种方法通常会导致图片发生损坏，例如，当图片尺寸大于一定宽度时，InternetExplore浏览器会导致图片显示不完整，出现局部的破损或在图片上出现小白点等，从而影响了图片显示效果。

【发明内容】

基于此，有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的方法。

一种在网络浏览器上实现图片渐进渐出效果的方法，包括以下步骤：

在图片显示区域上方设置遮罩层；

加载当前需显示的图片，将所述图片设置为可见；

按照设定的时间间隔调整所述遮罩层的透明度。

优选的，在所述按照设定的时间间隔调整所述遮罩层的透明度的步骤之后还包括：

判断是否还有下一张需显示的图片，若是，则

隐藏所述当前需显示的图片；

加载所述下一张需显示的图片，将所述下一张需显示的图片设置为可见；

按照设定的时间间隔调整所述遮罩层的透明度。

优选的，所述按照设定的时间间隔调整所述遮罩层的透明度的步骤为：

按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。

优选的，所述遮罩层设置在所述图片显示区域的正上方，并与所述图片显示区域大小一致。

此外，还有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的装置。

一种在网络浏览器上实现图片渐进渐出效果的装置，，包括：

设置模块，用于在图片显示区域上方设置遮罩层；

加载模块，用于加载当前需显示的图片，并将所述图片设置为可见；

调整模块，用于按照设定的时间间隔调整所述遮罩层的透明度。

优选的，还包括：

判断模块，用于判断是否还有下一张需显示的图片；

所述调整模块还用于当还有下一张需显示的图片时，隐藏所述当前需显示的图片；

所述加载模块还用于当还有下一张需显示的图片时，加载所述下一张需显示的图片，并将所述下一张需显示的图片设置为可见，以及通知所述调整模块按照设定的时间间隔调整所述遮罩层的透明度。

优选的，所述调整模块用于按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。

优选的，所述设置模块用于在所述图片显示区域的正上方设置遮罩层，所述遮罩层与所述图片显示区域大小一致。

上述在网络浏览器上实现图片渐进渐出效果的方法和装置，通过在图片显示区域上方设置遮罩层，显示图片时图片直接设置为可见，通过调整遮罩层的透明度来实现图片渐进渐出效果，不需要调整图片的透明度属性，因此不会损坏图片，改善了图片的显示效果。

【附图说明】

图1为一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图；

图2为一个实施例中设置遮罩层的示意图；

图3为另一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图；

图4为一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图；

图5为另一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图。

【具体实施方式】

如图1所示，在一个实施例中，一种在网络浏览器上实现图片渐进渐出效果的方法，包括以下步骤：

步骤S102，在图片显示区域上方设置遮罩层。

如图2所示，遮罩层是垂直于显示图片的显示器坐标方向，在图片显示区域上方，以指定颜色(通常为黑色或者灰色)为背景的网页容器元素。优选的，遮罩层设置在图片显示区域的正上方，并且与图片显示区域的大小一致。这样，调整遮罩层的透明度时，图片显示的透明度也会相应变化，设置遮罩层与图片显示区域大小一致，可以避免调整遮罩层的透明度时，不会影响到图片显示区域之外的网页元素。

步骤S104，加载当前需显示的图片，将该图片设置为可见。

将当前需显示的图片加载到图片显示区域，并将图片设置为可见。

步骤S106，按照设定的时间间隔调整遮罩层的透明度。

调整遮罩层的透明度时，图片显示的透明度会随着遮罩层的透明度变化而变化，从而实现图片渐进渐出效果。由于不需要直接调整图片的透明度属性，因此不会对图片造成损坏，改善了图片显示效果。

如图3所示，在另一个实施例中，一种在网络浏览器上实现图片渐进渐出效果的方法，包括以下步骤：

步骤S202，在图片显示区域上方设置遮罩层。

如图2所示，在一个优选的实施例中，遮罩层设置在图片显示区域的正上方，并且与图片显示区域的大小一致。

步骤S204，加载当前需显示的图片，将该图片设置为可见。

打开网页时，通常在图片显示区域需要显示多张图片，该实施例中，仅加载当前需显示的图片，而其他接着要显示的图片可以在当前需显示的图片显示完后再去加载。这样，按照需要加载图片，在网页打开时能够减少网络数据传输，缩短网页打开时间。此外，一些网页打开后在较短的时间内就被关闭，若将所有需要在图片显示区域显示的图片都加载下来，往往一些加载下来的图片并没有使用到，因此，按照需要加载图片，也可以减少不必要的网络数据传输。

加载当前需显示的图片，是将图片输出到网页指定区域(即图片显示区域)对应的HTML(HyperTextMark-upLanguage，超文本标记语言)代码中。在加载完当前需显示的图片时，将该图片设置为可见。

在其他实施方式中，也可以加载需要在图片显示区域显示的多张图片，若加载的是多张图片，则将当前需显示的图片设置为可见，将其它图片进行隐藏。

步骤S206，按照设定的时间间隔调整遮罩层的透明度。

在步骤S206中，按照设定的时间间隔以预设数值为单位降低或增加遮罩层的透明度。例如，每2秒降低遮罩层10％的透明度。当遮罩层的透明度降低时，则图片显示的透明度增加，即图片会逐渐的显示出来。

步骤S208，判断是否还有下一张需显示的图片，若是，则进入步骤S210，否则结束。若还有下一张需显示的图片，则继续显示。

步骤S210，隐藏当前需显示的图片。

若还需要显示下一张需显示的图片，则将当前需显示的图片隐藏。这样，若以后还需要显示当前需显示的图片时，可以将该当前需显示的图片直接设置为可见，而不需要重新加载这张图片，因此既能减少网络数据传输，又提高了处理效率。

步骤S212，加载下一张需显示的图片，将下一张需显示的图片设置为可见。

步骤S214，按照设定的时间间隔调整所述遮罩层的透明度，返回步骤S208。

如上所述，对于每一张需显示的图片，通过调整遮罩层的透明度即可实现该张图片的渐进渐出效果，而不需要直接调整每张图片的透明度属性，因此不会对图片造成损坏。调整完遮罩层的透明度后，返回到步骤S208继续判断是否还有下一张需显示的图片，若所有的图片已经显示完或网页关闭时，则流程结束。

在另一个实施例中，显示完所有的图片后，判断是否需要循环显示图片，若是，则继续从第一张图片开始显示，即隐藏其他图片(将其他图片设置为不可见)，仅将第一张图片设置为可见。由于图片已经加载完，因此不需要重新加载图片，减少了网络数据传输。当需要循环显示图片时，仅需要按照图片的显示顺序将当前需要显示的图片设置为可见，将其他图片设置为不可见，并在将当前需显示的图片设置为可见后，通过调整遮罩层的透明度来实现图片的渐进渐出效果。

如图4所示，在一个实施例中，一种在网络浏览器上实现图片渐进渐出效果的装置，包括设置模块102、加载模块104和调整模块106，其中：

设置模块102用于在图片显示区域上方设置遮罩层。

如图2所示，遮罩层是垂直于显示图片的显示器坐标方向，在图片显示区域上方，以指定颜色(通常为黑色或者灰色)为背景的网页容器元素。优选的，设置模块102将遮罩层设置在图片显示区域的正上方，并且与图片显示区域的大小一致。这样，调整遮罩层的透明度时，图片显示的透明度也会相应变化，设置遮罩层与图片显示区域大小一致，可以避免调整遮罩层的透明度时，不会影响到图片显示区域之外的网页元素。

加载模块104用于加载当前需显示的图片，并将该当前需显示的图片设置为可见。

调整模块106用于按照设定的时间间隔调整遮罩层的透明度。

由于当前需显示的图片设置为可见，调整模块106在调整遮罩层的透明度时，图片显示的透明度会随着遮罩层的透明度变化而变化，从而实现图片渐进渐出效果。由于不需要直接调整图片的透明度属性，因此不会对图片造成损坏，改善了图片显示效果。

如图5所示，在另一个实施例中，一种在网络浏览器上实现图片渐进渐出效果的装置，除了包括上述设置模块102、加载模块104和调整模块106外，还包括判断模块108，其中：

判断模块108用于判断是否还有下一张需显示的图片。

该实施例中，调整模块106还用于当还有下一张需显示的图片时，隐藏所述当前需显示的图片；加载模块104还用于当还有下一张需显示的图片时，加载所述下一张需显示的图片，并将所述下一张需显示的图片设置为可见，以及通知调整模块106按照设定的时间间隔调整遮罩层的透明度。

加载模块104在还有下一张需显示图片时，继续加载下一张需显示的图片。也就是说，加载模块104仅加载当前需要显示的图片，而其他接着要显示的图片可以在当前需显示的图片显示完后再去加载。这样按照需要加载图片，在网页打开时能够减少网络数据传输，缩短网页打开时间。此外，一些网页打开后可能在较短的时间内就被关闭，若将所有需要在图片显示区域显示的图片都加载下来，往往一些加载下来的图片并没有使用到，因此，按照需要加载图片，也可以减少不必要的网络数据传输。

加载模块104加载当前需显示的图片，是将图片输出到网页指定区域(即图片显示区域)对应的HTML(HyperTextMark-upLanguage，超文本标记语言)代码中。在加载完当前需显示的图片时，将该图片设置为可见。

该实施例中，若还有下一张需显示的图片，则调整模块106将当前需显示的图片隐藏，这样，若以后还需要显示当前需显示的图片时，可以将该当前需显示的图片直接设置为可见，而不需要重新加载这张图片，因此既能减少网络数据传输，又提高了处理效率。

对于每一张需显示的图片，通过调整遮罩层的透明度即可实现该张图片的渐进渐出效果，而不需要直接调整每张图片的透明度属性，因此不会对图片造成损坏。调整完遮罩层的透明度从而实现了当前图片的渐进渐出效果后，判断模块108会继续判断是否还有下一张需显示的图片，直到所有的图片已显示完或网页关闭。

在另一个实施例中，当所有图片都显示完后，判断模块108可进一步判断是否还需要循环显示图片，若是，则调整模块106隐藏当前显示的图片，将第一张图片设置为可见，然后调整模块106继续调整遮罩层的透明度来实现图片的渐进渐出效果。也就是说，当需要循环显示图片时，仅需要按照图片的显示顺序将当前需要显示的图片设置为可见，将其他图片设置为不可见，并在将当前需显示的图片设置为可见后，通过调整遮罩层的透明度来实现图片的渐进渐出效果。由于需要显示的所有图片都已经加载完，循环显示图片时不需要重新加载图片，减少了网络数据传输。

应该说明的是，上述在网络浏览器实现图片渐进渐出效果的方法和系统并不局限于网络浏览器的类型，在多类网络浏览器上都可以实现图片渐进渐出效果。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (4)

1.一种在网络浏览器上实现图片渐进渐出效果的方法，包括以下步骤：

在图片显示区域上方设置遮罩层；

加载当前需显示的图片，将所述图片设置为可见；

按照设定的时间间隔调整所述遮罩层的透明度，具体是按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度；

判断是否还有下一张需显示的图片，若是，则

隐藏所述当前需显示的图片；

加载所述下一张需显示的图片，将所述下一张需显示的图片设置为可见；

按照设定的时间间隔调整所述遮罩层的透明度。

2.根据权利要求1所述的在网络浏览器上实现图片渐进渐出效果的方法，其特征在于，所述遮罩层设置在所述图片显示区域的正上方，并与所述图片显示区域大小一致。

3.一种在网络浏览器上实现图片渐进渐出效果的装置，其特征在于，包括：

设置模块，用于在图片显示区域上方设置遮罩层；

加载模块，用于加载当前需显示的图片，并将所述图片设置为可见；

调整模块，用于按照设定的时间间隔调整所述遮罩层的透明度，具体是按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度；

判断模块，用于判断是否还有下一张需显示的图片；

所述调整模块还用于当还有下一张需显示的图片时，隐藏所述当前需显示的图片；

所述加载模块还用于当还有下一张需显示的图片时，加载所述下一张需显示的图片，并将所述下一张需显示的图片设置为可见，以及通知所述调整模块按照设定的时间间隔调整所述遮罩层的透明度。

4.根据权利要求3所述的网络浏览器上实现图片渐进渐出效果的装置，其特征在于，所述设置模块用于在所述图片显示区域的正上方设置遮罩层，所述遮罩层与所述图片显示区域大小一致。