依据可视区域在网页中显示图片的系统及其方法.pdf

本发明公开一种依据可视区域在网页中显示图片的系统及其方法，其通过修改目标网页中的图片物件的属性，使图片物件在目标网页中呈现尺寸与浏览器表示目标图片所使用的替代物件相同的替代图片后，判断与载入完成的目标图片对应的替代图片位于可视区域的中或位于可视区域的下方时，还原与载入完成的目标图片对应的图片物件的属性，使目标图片取代替代图片呈现于目标网页中的技术手段，可以不显示可视区域上方的目标图片，并达成避免影响使用者浏览网页内容的技术功效。

权利要求书
1.  一种依据可视区域在网页中显示图片的方法，应用于一浏览器显示 一目标网页时，其特征在于，该方法至少包含下列步骤：
通过该目标网页的一文件物件模型搜寻该目标网页中的所有图片物件；
修改一该图片物件的至少一属性，使该图片物件在该目标网页中呈现尺 寸与该浏览器表示该些目标图片所使用的一替代物件相同的一替代图片；
当该图片物件所对应的一目标图片载入完成时，判断该图片物件所呈现 的该替代图片与一可视区域在该目标网页中的相对位置；及
当该替代图片位于该可视区域中或位于该可视区域下方时，还原呈现该 替代图片的该图片物件的属性，使该目标图片取代该替代图片呈现于该目标 网页中。

2.  如权利要求1所述的依据可视区域在网页中显示图片的方法，其特 征在于，该方法于判断该图片物件所呈现的该替代图片与该可视区域在该目 标网页中的相对位置的步骤后，更包含于该可视区域发生变化时，再次判断 该图片物件所呈现的该替代图片与该可视区域在该目标网页中的相对位置， 并于该替代图片位于该可视区域中或位于该可视区域下方时，还原呈现该替 代图片的该图片物件的属性，使该目标图片取代该替代图片呈现于该目标网 页中的步骤。

3.  如权利要求1所述的依据可视区域在网页中显示图片的方法，其特 征在于，判断该图片物件所呈现的该替代图片与该可视区域在该目标网页中 的相对位置的步骤为获取该替代图片在该目标网页中的一图片位置信息及 该可视区域在该目标网页中的一可视位置信息，并依据该图片位置信息及该 可视位置信息判断该替代图片与该可视区域的相对位置。

4.  如权利要求1所述的依据可视区域在网页中显示图片的方法，其特 征在于，修改该图片物件的至少一属性的步骤为修改该图片物件的图片来源 路径或修改该图片物件的图片长度与图片宽度。

5.  如权利要求4所述的依据可视区域在网页中显示图片的方法，其特 征在于，该方法于修改该图片物件的图片来源路径的步骤后，更包含于该目 标网页中建立图片来源路径为该目标图片的下载路径的一暂时图片物件，藉 以下载该目标图片的步骤。

6.  一种依据可视区域在网页中显示图片的系统，应用于一浏览器显示 一目标网页时，其特征在于，该系统至少包含：
一物件搜寻模块，用以通过该目标网页的一文件物件模型搜寻该目标网 页中的所有图片物件；
一属性修改模块，用以修改一该图片物件的至少一属性，使该图片物件 在该目标网页中所呈现的一替代图片的尺寸与该浏览器表示该些目标图片 所使用的一替代物件相同；及
一相对位置判断模块，用以于该图片物件所对应的一目标图片载入完成 时，判断该图片物件所呈现的该替代图片与一可视区域在该目标网页中的相 对位置，该属性修改模块更用以于该相对位置判断模块判断该替代图片位于 该可视区域中或位于该可视区域下方时，还原呈现该替代图片的图片物件的 属性，使该目标图片取代该替代图片呈现于该目标网页中。

7.  如权利要求6所述的依据可视区域在网页中显示图片的系统，其特 征在于，该相对位置判断模块该可视区域发生变化时，再次判断该图片物件 所呈现的该替代图片与该可视区域在该目标网页中的相对位置。

8.  如权利要求6所述的依据可视区域在网页中显示图片的系统，其特 征在于，该相对位置判断模块是获取该替代图片在该目标网页中的一图片位 置信息及该可视区域在该目标网页中的一可视位置信息，并依据该图片位置 信息及该可视位置信息判断该替代图片与该可视区域的相对位置。

9.  如权利要求6所述的依据可视区域在网页中显示图片的系统，其特 征在于，该属性修改模块是修改该图片物件的图片来源路径或修改该图片物 件的图片长度与图片宽度。

10.  如权利要求9所述的依据可视区域在网页中显示图片的系统，其特 征在于，该系统更包含一物件建立模块，用以于该目标网页中建立图片来源 路径为该目标图片的下载路径的一暂时图片物件，藉以下载该目标图片。

说明书依据可视区域在网页中显示图片的系统及其方法
技术领域
本发明涉及一种网页图片显示系统及其方法，特别是指一种依据可视区 域在网页中显示图片的系统及其方法。
背景技术
在浏览器中，网页中的超文本标记语言（HyperText Markup Language, HTML）的语法与图片的载入是非同步执行的，当浏览器载入HTML语法后， 若所载入的HTML语法中包含用来显示图片的标签，则浏览器会先在网页中 使用替代图示表示该图片，之后，浏览器才会开始载入图片，并在图片载入 完成后才会将载入完成的图片取代替代图示在网页中显示。
在部分的网页中，网页的开发者可能没有在用来显示图片的标签中写下 被显示的图片的宽与高，若图片的尺寸大于替代图示的尺寸，则在浏览器完 成图片的载入并在网页中显示时，在图片下方的网页内容将会强制向下位 移。若在浏览器载入图片前，使用者已经将网页卷动到未显示的图片下方进 行浏览，当图片载入完成并在网页中显示时，由于图片下方的网页内容会向 下位移，这造成使用者正在浏览的网页内容会向下位移，若使用者希望继续 浏览先前所浏览的网页内容，则使用者需要将网页卷动到先前所浏览的网页 内容才能继续浏览。
一旦使用者所浏览的网页内容上方包含数张图片时，在每一张图片载入 完成后，使用者所浏览的网页内容向下位移的情况会持续发生，直至使用者 所浏览的网页内容上方的所有图片都载入完成并在网页中显示为止，这明显 造成使用者在浏览网页时的困扰。
综上所述，可知现有技术中长期以来一直存在网页中的图片被显示时， 图片下方的网页内容会向下位移的问题，因此有必要提出改进的技术手段， 来解决此一问题。
发明内容
有鉴于现有技术存在使用者所浏览的网页内容会在上方图片在网页中 被显示时向下位移的问题，本发明遂揭露一种依据可视区域在网页中显示图 片的系统及其方法，其中：
本发明所揭露的依据可视区域在网页中显示图片的系统，至少包含：物 件搜寻模块，用以通过目标网页的文件物件模型（Document Object Model, DOM）搜寻目标网页中的所有图片物件；属性修改模块，用以修改图片物件 的属性，使图片物件在目标网页中所呈现的替代图片的尺寸与浏览器表示目 标图片所使用的替代物件相同；相对位置判断模块，用以于图片物件所对应 的目标图片载入完成时，判断图片物件所呈现的替代图片与可视区域在目标 网页中的相对位置，属性修改模块更用以于相对位置判断模块判断替代图片 位于可视区域中或位于可视区域下方时，还原呈现替代图片的图片物件的属 性，使目标图片取代替代图片呈现于目标网页中。
本发明所揭露的依据可视区域在网页中显示图片的方法，其步骤至少包 括：通过目标网页的文件物件模型搜寻目标网页中的所有图片物件；修改图 片物件的属性，使图片物件在目标网页中呈现尺寸与浏览器表示目标图片所 使用的替代物件相同的替代图片；当图片物件所对应的目标图片载入完成 时，判断图片物件所呈现的替代图片与可视区域在目标网页中的相对位置； 当替代图片位于可视区域中或位于可视区域下方时，还原呈现替代图片的图 片物件的属性，使目标图片取代替代图片呈现于目标网页中。
本发明所揭露的系统与方法如上，与现有技术之间的差异在于本发明通 过修改目标网页中的图片物件的属性，使图片物件在目标网页中呈现尺寸与 浏览器表示目标图片所使用的替代物件相同的替代图片后，判断与载入完成 的目标图片对应的替代图片位于可视区域之中或位于可视区域的下方时，还 原与载入完成的目标图片对应的图片物件的属性，使目标图片取代替代图片 呈现于目标网页中，藉以解决现有技术所存在的问题，并可以达成避免影响 使用者浏览网页内容的技术功效。
附图说明
图1为本发明所提的依据可视区域在网页中显示图片的系统架构图。
图2为本发明所提的依据可视区域在网页中显示图片的方法流程图。
图3A与图3B为本发明实施例所提的依据可视区域在目标网页中显示目 标图片的示意图。
【符号说明】
110        物件搜寻模块
130        相对位置判断模块
150        属性修改模块
190        物件建立模块
310        目标网页
311a、312a 替代图片
311b、312b 目标图片
313、314   目标图片
320        可视区域
具体实施方式
以下将配合图式及实施例来详细说明本发明的特征与实施方式，内容足 以使任何本领域技术人员能够轻易地充分理解本发明解决技术问题所应用 的技术手段并据以实施，藉此实现本发明可达成的功效。
本发明可以在浏览器显示目标网页的网页内容时，先以替代图片取代相 对应的目标图片在目标网页中呈现，并依据目标网页的可视区域与替代图片 在目标网页中的相对位置，判断是否将替代图片还原为相对应的目标图片在 目标网页中呈现。一般而言，本发明包含在可嵌入目标网页的脚本（Script） 中，但本发明并不以此为限。
在本发明中，替代图片被用来暂时取代相对应的目标图片在目标网页上 呈现，替代图片在目标网页中的位置会与相对应的目标图片在目标网页中的 位置相同。另外，替代图片的尺寸大小会与浏览器表示目标图片所使用的替 代物件的尺寸大小相同。其中，浏览器所使用的替代物件是在目标图片未被 浏览器载入前，用来在目标网页中表示未被载入的目标图片的图像（icon） 等物件。
以下先以「图1」本发明所提的依据可视区域在网页中显示图片的系统 架构图来说明本发明的系统运作。如「图1」所示，本发明的系统含有物件 搜寻模块110、相对位置判断模块130、以及属性修改模块150。
物件搜寻模块110负责搜寻目标网页中的所有图片物件（image object）。 一般而言，物件搜寻模块110可以通过目标网页中的文件物件模型（Document  Object Model,DOM）取得目标网页中的所有物件，并依据所取得的物件的属 性（property）判断所取得的物件是否为图片物件。
目标网页中的每一个图片物件都可以对应到一张图片，在本发明中，与 图片物件对应的图片被称为「目标图片」。其中，目标图片可以被浏览器显 示在目标网页的网页内容中。
相对位置判断模块130负责在浏览器完成目标图片的载入时，判断与载 入完成的目标图片相对应的替代图片与目标网页的可视区域的相对位置。其 中，相对位置判断模块130可以通过图片物件在目标图片完成载入时所产生 的载入完成的网页事件（onComplete event）判断出目标图片已经完成载入， 但相对位置判断模块130判断目标图片完成载入的方式并不以此为限。
相对位置判断模块130也负责在目标网页的可视区域发生变化时，判断 载入完成的目标图片与目标网页的可视区域的相对位置。其中，相对位置判 断模块130可以监听浏览器的操作事件，并在监听到可以让目标网页的可视 区域发生变化事件时，如监听到画面卷动事件、画面放大事件等，判断目标 网页的可视区域发生变化，但相对位置判断模块130判断目标网页的可视区 域发生变化的方式并不以此为限，例如，相对位置判断模块130也可以通过 持续获取当前目标网页的可视区域的可视位置信息，并与前一次所获取到的 可视位置信息进行比对，当两者不同时，表示目标网页的可视区域发生变化。 其中，被相对位置判断模块130所获取的可视位置信息可以表示目标网页的 可视区域在目标网页上的位置，例如，目标网页上的坐标点，但本发明所提 的可视位置信息并不以此为限。
相对位置判断模块130可以获取与目标图片对应的替代图片在目标网页 上的图片位置信息。由于替代图片在目标网页上的位置与目标图片相同，因 此，相对位置判断模块130可以通过与载入完成的目标图片对应的图片物件 的属性获取图片位置信息。被相对位置判断模块130所获取的图片位置信息 可以表示图片物件在目标网页上的位置，例如，目标网页上的坐标点，但本 发明所提的图片位置信息并不以此为限。
同时，相对位置判断模块130也可以通过目标网页上的window物件的 属性获取目标网页的可视区域的可视位置信息，并依据所获取到的图片位置 信息以及可视位置信息判断与载入完成的目标图片对应的替代图片是在目 标网页的可视区域中，或是在可视区域上方或下方。
属性修改模块150负责修改物件搜寻模块110所搜寻到的图片物件的一 个或多个属性，使浏览器依据属性被修改后的图片物件在目标网页中所呈现 的替代图片的尺寸大小为与浏览器在目标网页中表示未完成下载的目标图 片所使用的替代物件的尺寸大小相同。在部分的实施例中，属性修改模块150 可以先判断图片物件的图片长度的属性是否被设定，属性修改模块150可以 在图片物件的图片长度的属性没有被设定时才修改图片物件的属性。
属性修改模块150可以将图片物件的图片来源路径的属性中的数据修改 为替代图片的下载路径，使得浏览器依据图片物件在目标网页中所呈现的图 片是尺寸大小与浏览器所使用的替代图片相同的替代图片而非目标图片；属 性修改模块150也可以将图片物件的图片长度与图片宽度的属性修改为与浏 览器所使用的替代物件的长与宽相同。
属性修改模块150也负责在相对位置判断模块130判断与载入完成的目 标图片对应的替代图片位于可视区域中或位于可视区域下方时，也就是判断 载入完成的目标图片不位于可视区域上方时，若属性修改模块150先前是将 与载入完成的目标图片对应的图片物件的图片来源路径的属性所储存的数 据修改为替代图片的下载地址，则属性修改模块150会将与载入完成的目标 图片对应的图片物件的图片来源路径的属性由替代图片的下载地址还原为 目标图片的下载地址，使目标图片取代替代图片，被浏览器完整呈现于目标 网页中；而若属性修改模块150是对图片物件的图片高度与图片宽度的属性 进行修改，则属性修改模块150会将图片物件的图片高度与图片宽度的属性 中的数据还原。
此外，本发明更可以包含可附加的物件建立模块190，物件建立模块190 可以在属性修改模块150将图片物件的图片来源路径的属性中的数据修改为 替代图片的下载路径时，在目标网页中增加一个临时图片物件，该临时图片 物件的图片来源路径的属性即为被修改的目标图片的下载路径，藉以让浏览 器依据目标图片的下载路径下载目标图片。
物件建立模块190也可以在属性修改模块150将图片物件的图片来源路 径的属性中的数据由替代图片的下载路径还原为原先的目标图片的下载路 径时，将先前在目标网页中所建立的临时图片物件删除。
接着以一个实施例来解说本发明的运作系统与方法，并请参照「图2」 本发明所提的依据可视区域在网页中显示图片的方法流程图。在本实施例 中，假设目标网页并未包含本发明，而是由浏览器本身或浏览器的外挂程序 将包含本发明的脚本嵌入目标网页中，但本发明并不以此为限，目标网页的 开发者也可以在开发目标网页时，将包含本发明的脚本写入目标网页中。
当使用者使用浏览器浏览目标网页时，浏览器会下载目标网页后，在浏 览器下载目标网页的过程中，则物件搜寻模块110可以搜寻目标网页中的所 有图片物件（步骤210）。在本实施例中，假设物件搜寻模块110会在浏览 器完成目标网页的下载，且浏览器完成文件物件模型的初始化后，通过文件 物件模型搜寻目标网页中的所有图片物件。
在物件搜寻模块110搜寻出目标网页中的所有图片物件（步骤210）后， 属性修改模块150可以修改物件搜寻模块110所搜寻出的图片物件的属性， 使图片物件在目标网页中呈现尺寸与浏览器表示目标图片所使用的替代物 件相同的替代图片（步骤220）。在本实施例中，假设属性修改模块150会 修改图片物件的图片来源地址的属性，将图片物件的图片来源地址由目标图 片的下载地址修改为替代图片的下载地址。
在属性修改模块150修改图片物件的属性后，若目标网页中并没有包含 预先下载目标网页中的所有图片的脚本，则本实施例所提的被嵌入目标网页 中的脚本便需要包含物件建立模块190，物件建立模块190可以在目标网页 中建立图片来源路径的属性为目标图片的下载路径的暂时图片物件，藉以让 浏览器下载目标图片（步骤230）。
而若目标网页中原本即已经包含预先下载目标网页中的所有图片的脚 本，或是在物件建立模块190在目标网页中建立暂时图片物件后，相对位置 判断模块130可以判断与目标网页中的各个图片物件对应的目标图片是否已 经载入完成（步骤240）。在本实施例中，假设相对位置判断模块130会判 断被下载的目标图片是否产生onComplete的网页事件，当表示目标图片完成 载入的onComplete网页事件被产生时，相对位置判断模块130即可以判断出 有目标图片完成载入。
若没有目标图片完成载入的网页事件被产生，则相对位置判断模块130 可以持续等待目标图片完成载入的网页事件被产生，而若有目标图片完成载 入的网页事件被产生，则相对位置判断模块130可以判断与载入完成的目标 图片对应的替代图片与目标网页的可视区域在目标网页中的相对位置（步骤 251）。在本实施例中，相对位置判断模块130会通过在目标网页上呈现替 代图片的图片物件的offsetTop属性取得替代图片与目标网页的顶端的距离 （图片位置信息），也会通过window物件的pageYOffset属性取得目标网页 的可视区域与目标网页的顶端的距离（可视位置信息），并依据替代图片与 目标网页的顶端的距离与目标网页的可视区域与目标网页的顶端的距离判 断载入完成的目标图片在目标网页的可视区域中，或是在目标网页的可视区 域的上方或下方。
在相对位置判断模块130判断出与载入完成的目标图片对应的替代图片 与目标网页的可视区域在目标网页中的相对位置（步骤251）后，相对位置 判断模块130可以进一步判断载入替代图片是否在可视区域的上方（步骤 255），若否，也就是与载入完成的目标图片对应的替代图片在可视区域之 中或是在可视区域的下方，则属性修改模块150可以将呈现替代图片的图片 物件的图片来源地址的属性还原回目标图片的下载位置，使得目标图片取代 替代图片被浏览器显示于目标网页中（步骤260）。如「图3A」的目标图片 313与目标图片314所示，其中，目标图片313在可视区域320之中，目标 图片314在可视区域320的下方。
而若载入完成的目标图片在可视区域的上方，则属性修改模块150不会 被将呈现替代图片的图片物件的图片来源地址的属性还原回原先目标图片 的下载位置，如「图3A」的替代图片311a与替代图片312a所示。
同时，若载入完成的目标图片在可视区域的上方，则相对位置判断模块 130也可以进一步判断目标网页的可视区域是否发生变化（步骤270）。在 本实施例中，假设相对位置判断模块130会监听浏览器的操作事件，并在监 听到画面卷动事件时，判断目标网页的可视区域发生变化。
若相对位置判断模块130判断目标网页的可视区域没有发生变化，则相 对位置判断模块130可以持续等待目标网页的可视区域发生变化，而若相对 位置判断模块130判断目标网页的可视区域发生变化，如「图3B」所示，目 标网页310被向上卷动，因此目标网页的可视区域320也会向上移动，则相 对位置判断模块130可以再次判断与载入完成的目标图片对应的替代图片与 目标网页的可视区域在目标网页中的相对位置（步骤251），判断与载入完 成的目标图片对应的替代图片是否在可视区域的上方（步骤255），若否， 则属性修改模块150可以将呈现替代图片的图片物件的图片来源地址的属性 还原回目标图片的下载位置，使得目标图片取代替代图片被浏览器显示于目 标网页中（步骤260），如目标图片312b取代了替代图片312a。而若与载 入完成的目标图片对应的替代图片依然在可视区域的上方，则相对位置判断 模块130可以继续判断目标网页的可视区域是否发生变化（步骤270），属 性修改模块150依然不会将呈现替代图片的图片物件的图片来源地址的属性 还原回目标图片的下载位置，如替代图片311a所示。
综上所述，可知本发明与现有技术之间的差异在于具有修改目标网页中 的图片物件的属性，使图片物件在目标网页中呈现尺寸与浏览器表示目标图 片所使用的替代物件相同的替代图片后，判断与载入完成的目标图片对应的 替代图片位于可视区域之中或位于可视区域的下方时，还原与载入完成的目 标图片对应的图片物件的属性，使目标图片取代替代图片呈现于目标网页中 的技术手段，藉由此一技术手段可以解决现有技术所存在使用者所浏览的网 页内容会在上方图片在网页中被显示时向下位移的问题，进而达成避免影响 使用者浏览网页内容的技术功效。
再者，本发明的依据可视区域在网页中显示图片的方法，可实现于硬件、 软件或硬件与软件的组合中，亦可在计算机系统中以集中方式实现或以不同 元件散布于若干互连的计算机系统的分散方式实现。
虽然本发明所揭露的实施方式如上，惟所述的内容并非用以直接限定本 发明的专利保护范围。任何本发明所属技术领域中的技术人员，在不脱离本 发明所揭露的精神和范围的前提下，对本发明的实施的形式上及细节上作些 许的更动润饰，均属于本发明的专利保护范围。本发明的专利保护范围，仍 须以所附的权利要求书所界定者为准。