在网络浏览器上实现图片渐进渐出效果的方法和装置 【技术领域】
本发明涉及网络技术领域， 尤其涉及一种在网络浏览器上实现图片渐进渐出效果 的方法和装置。 【背景技术】
随着网络技术的发展， 越来越多的浏览器可以实现图片渐进渐出效果， 使得图片 显示不会显得很突然。例如， 传统的 Internet Explorer 浏览器可以通过自带的滤镜功能 来实现图片渐进渐出效果。 传统的支持在多类浏览器上实现图片渐进渐出的方法主要通过 直接改变图片的透明度属性来实现。 然而这种方法通常会导致图片发生损坏， 例如， 当图片 尺寸大于一定宽度时， Internet Explore 浏览器会导致图片显示不完整， 出现局部的破损 或在图片上出现小白点等， 从而影响了图片显示效果。 【发明内容】
基于此， 有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐 出效果的方法。
一种在网络浏览器上实现图片渐进渐出效果的方法， 包括以下步骤 ：
在图片显示区域上方设置遮罩层 ；
加载当前需显示的图片， 将所述图片设置为可见 ；
按照设定的时间间隔调整所述遮罩层的透明度。
优选的， 在所述按照设定的时间间隔调整所述遮罩层的透明度的步骤之后还包 括：
判断是否还有下一张需显示的图片， 若是， 则
隐藏所述当前需显示的图片 ；
加载所述下一张需显示的图片， 将所述下一张需显示的图片设置为可见 ；
按照设定的时间间隔调整所述遮罩层的透明度。
优选的， 所述按照设定的时间间隔调整所述遮罩层的透明度的步骤为 ：
按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
优选的， 所述遮罩层设置在所述图片显示区域的正上方， 并与所述图片显示区域 大小一致。
此外， 还有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐 出效果的装置。
一种在网络浏览器上实现图片渐进渐出效果的装置， ， 包括 ：
设置模块， 用于在图片显示区域上方设置遮罩层 ；
加载模块， 用于加载当前需显示的图片， 并将所述图片设置为可见 ；
调整模块， 用于按照设定的时间间隔调整所述遮罩层的透明度。
优选的， 还包括 ：判断模块， 用于判断是否还有下一张需显示的图片 ； 所述调整模块还用于当还有下一张需显示的图片时， 隐藏所述当前需显示的图片； 所述加载模块还用于当还有下一张需显示的图片时， 加载所述下一张需显示的图 片， 并将所述下一张需显示的图片设置为可见， 以及通知所述调整模块按照设定的时间间 隔调整所述遮罩层的透明度。
优选的， 所述调整模块用于按照设定的时间间隔以预设数值为单位降低或增加所 述遮罩层的透明度。
优选的， 所述设置模块用于在所述图片显示区域的正上方设置遮罩层， 所述遮罩 层与所述图片显示区域大小一致。
上述在网络浏览器上实现图片渐进渐出效果的方法和装置， 通过在图片显示区 域上方设置遮罩层， 显示图片时图片直接设置为可见， 通过调整遮罩层的透明度来实现图 片渐进渐出效果， 不需要调整图片的透明度属性， 因此不会损坏图片， 改善了图片的显示效 果。
【附图说明】
图 1 为一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图 ；
图 2 为一个实施例中设置遮罩层的示意图 ；
图 3 为另一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图 ；
图 4 为一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意 图；
图 5 为另一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图。 【具体实施方式】
如图 1 所示， 在一个实施例中， 一种在网络浏览器上实现图片渐进渐出效果的方 法， 包括以下步骤 ：
步骤 S102， 在图片显示区域上方设置遮罩层。
如图 2 所示， 遮罩层是垂直于显示图片的显示器坐标方向， 在图片显示区域上方， 以指定颜色 ( 通常为黑色或者灰色 ) 为背景的网页容器元素。优选的， 遮罩层设置在图片 显示区域的正上方， 并且与图片显示区域的大小一致。这样， 调整遮罩层的透明度时， 图片 显示的透明度也会相应变化， 设置遮罩层与图片显示区域大小一致， 可以避免调整遮罩层 的透明度时， 不会影响到图片显示区域之外的网页元素。
步骤 S104， 加载当前需显示的图片， 将该图片设置为可见。
将当前需显示的图片加载到图片显示区域， 并将图片设置为可见。
步骤 S106， 按照设定的时间间隔调整遮罩层的透明度。
调整遮罩层的透明度时， 图片显示的透明度会随着遮罩层的透明度变化而变化， 从而实现图片渐进渐出效果。由于不需要直接调整图片的透明度属性， 因此不会对图片造 成损坏， 改善了图片显示效果。如图 3 所示， 在另一个实施例中， 一种在网络浏览器上实现图片渐进渐出效果的 方法， 包括以下步骤 ：
步骤 S202， 在图片显示区域上方设置遮罩层。
如图 2 所示， 在一个优选的实施例中， 遮罩层设置在图片显示区域的正上方， 并且 与图片显示区域的大小一致。
步骤 S204， 加载当前需显示的图片， 将该图片设置为可见。
打开网页时， 通常在图片显示区域需要显示多张图片， 该实施例中， 仅加载当前需 显示的图片， 而其他接着要显示的图片可以在当前需显示的图片显示完后再去加载。 这样， 按照需要加载图片， 在网页打开时能够减少网络数据传输， 缩短网页打开时间。此外， 一些 网页打开后在较短的时间内就被关闭， 若将所有需要在图片显示区域显示的图片都加载下 来， 往往一些加载下来的图片并没有使用到， 因此， 按照需要加载图片， 也可以减少不必要 的网络数据传输。
加载当前需显示的图片， 是将图片输出到网页指定区域 ( 即图片显示区域 ) 对应 的 HTML(Hyper Text Mark-up Language， 超文本标记语言 ) 代码中。在加载完当前需显示 的图片时， 将该图片设置为可见。 在其他实施方式中， 也可以加载需要在图片显示区域显示的多张图片， 若加载的 是多张图片， 则将当前需显示的图片设置为可见， 将其它图片进行隐藏。
步骤 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(Hyper Text Mark-up Language， 超文本标记语言 ) 代码中。在加载 完当前需显示的图片时， 将该图片设置为可见。
该实施例中， 若还有下一张需显示的图片， 则调整模块 106 将当前需显示的图片 隐藏， 这样， 若以后还需要显示当前需显示的图片时， 可以将该当前需显示的图片直接设置 为可见， 而不需要重新加载这张图片， 因此既能减少网络数据传输， 又提高了处理效率。
对于每一张需显示的图片， 通过调整遮罩层的透明度即可实现该张图片的渐进渐 出效果， 而不需要直接调整每张图片的透明度属性， 因此不会对图片造成损坏。 调整完遮罩 层的透明度从而实现了当前图片的渐进渐出效果后， 判断模块 108 会继续判断是否还有下 一张需显示的图片， 直到所有的图片已显示完或网页关闭。
在另一个实施例中， 当所有图片都显示完后， 判断模块 108 可进一步判断是否还需要循环显示图片， 若是， 则调整模块 106 隐藏当前显示的图片， 将第一张图片设置为可 见， 然后调整模块 106 继续调整遮罩层的透明度来实现图片的渐进渐出效果。也就是说， 当 需要循环显示图片时， 仅需要按照图片的显示顺序将当前需要显示的图片设置为可见， 将 其他图片设置为不可见， 并在将当前需显示的图片设置为可见后， 通过调整遮罩层的透明 度来实现图片的渐进渐出效果。由于需要显示的所有图片都已经加载完， 循环显示图片时 不需要重新加载图片， 减少了网络数据传输。
应该说明的是， 上述在网络浏览器实现图片渐进渐出效果的方法和系统并不局限 于网络浏览器的类型， 在多类网络浏览器上都可以实现图片渐进渐出效果。
以上所述实施例仅表达了本发明的几种实施方式， 其描述较为具体和详细， 但并 不能因此而理解为对本发明专利范围的限制。应当指出的是， 对于本领域的普通技术人员 来说， 在不脱离本发明构思的前提下， 还可以做出若干变形和改进， 这些都属于本发明的保 护范围。因此， 本发明专利的保护范围应以所附权利要求为准。