依据可视区域在网页中显示图片的系统及其方法
【技术领域】
[0001]本发明涉及一种网页图片显示系统及其方法，特别是指一种依据可视区域在网页中显示图片的系统及其方法。
【背景技术】
[0002]在浏览器中，网页中的超文本标记语言(HyperText Markup Language, HTML)的语法与图片的载入是非同步执行的，当浏览器载入HTML语法后，若所载入的HTML语法中包含用来显示图片的标签，则浏览器会先在网页中使用替代图示表示该图片，之后，浏览器才会开始载入图片，并在图片载入完成后才会将载入完成的图片取代替代图示在网页中显示。
[0003]在部分的网页中，网页的开发者可能没有在用来显示图片的标签中写下被显示的图片的宽与高，若图片的尺寸大于替代图示的尺寸，则在浏览器完成图片的载入并在网页中显示时，在图片下方的网页内容将会强制向下位移。若在浏览器载入图片前，使用者已经将网页卷动到未显示的图片下方进行浏览，当图片载入完成并在网页中显示时，由于图片下方的网页内容会向下位移，这造成使用者正在浏览的网页内容会向下位移，若使用者希望继续浏览先前所浏览的网页内容，则使用者需要将网页卷动到先前所浏览的网页内容才能继续浏览。
[0004]一旦使用者所浏览的网页内容上方包含数张图片时，在每一张图片载入完成后，使用者所浏览的网页内容向下位移的情况会持续发生，直至使用者所浏览的网页内容上方的所有图片都载入完成并在网页中显示为止，这明显造成使用者在浏览网页时的困扰。
[0005]综上所述，可知现有技术中长期以来一直存在网页中的图片被显示时，图片下方的网页内容会向下位移的问题，因此有必要提出改进的技术手段，来解决此一问题。
【发明内容】
[0006]有鉴于现有技术存在使用者所浏览的网页内容会在上方图片在网页中被显示时向下位移的问题，本发明遂揭露一种依据可视区域在网页中显示图片的系统及其方法，其中:
[0007]本发明所揭露的依据可视区域在网页中显示图片的系统，至少包含:物件搜寻模块，用以通过目标网页的文件物件模型(Document Object Model, DOM)搜寻目标网页中的所有图片物件；属性修改模块，用以修改图片物件的属性，使图片物件在目标网页中所呈现的替代图片的尺寸与浏览器表示目标图片所使用的替代物件相同；相对位置判断模块，用以于图片物件所对应的目标图片载入完成时，判断图片物件所呈现的替代图片与可视区域在目标网页中的相对位置，属性修改模块更用以于相对位置判断模块判断替代图片位于可视区域中或位于可视区域下方时，还原呈现替代图片的图片物件的属性，使目标图片取代替代图片呈现于目标网页中。
[0008]本发明所揭露的依据可视区域在网页中显示图片的方法，其步骤至少包括:通过目标网页的文件物件模型搜寻目标网页中的所有图片物件；修改图片物件的属性，使图片物件在目标网页中呈现尺寸与浏览器表示目标图片所使用的替代物件相同的替代图片；当图片物件所对应的目标图片载入完成时，判断图片物件所呈现的替代图片与可视区域在目标网页中的相对位置；当替代图片位于可视区域中或位于可视区域下方时，还原呈现替代图片的图片物件的属性，使目标图片取代替代图片呈现于目标网页中。
[0009]本发明所揭露的系统与方法如上，与现有技术之间的差异在于本发明通过修改目标网页中的图片物件的属性，使图片物件在目标网页中呈现尺寸与浏览器表示目标图片所使用的替代物件相同的替代图片后，判断与载入完成的目标图片对应的替代图片位于可视区域之中或位于可视区域的下方时，还原与载入完成的目标图片对应的图片物件的属性，使目标图片取代替代图片呈现于目标网页中，藉以解决现有技术所存在的问题，并可以达成避免影响使用者浏览网页内容的技术功效。
【附图说明】
[0010]图1为本发明所提的依据可视区域在网页中显示图片的系统架构图。
[0011]图2为本发明所提的依据可视区域在网页中显示图片的方法流程图。
[0012]图3A与图3B为本发明实施例所提的依据可视区域在目标网页中显示目标图片的示意图。
[0013]【符号说明】
[0014]110物件搜寻模块
[0015]130相对位置判断模块
[0016]150属性修改模块
[0017]190物件建立模块
[0018]310目标网页
[0019]311a、312a 替代图片
[0020]311b、312b 目标图片
[0021]313、314 目标图片
[0022]320可视区域
【具体实施方式】
[0023]以下将配合图式及实施例来详细说明本发明的特征与实施方式，内容足以使任何本领域技术人员能够轻易地充分理解本发明解决技术问题所应用的技术手段并据以实施，藉此实现本发明可达成的功效。
[0024]本发明可以在浏览器显示目标网页的网页内容时，先以替代图片取代相对应的目标图片在目标网页中呈现，并依据目标网页的可视区域与替代图片在目标网页中的相对位置，判断是否将替代图片还原为相对应的目标图片在目标网页中呈现。一般而言，本发明包含在可嵌入目标网页的脚本(Script)中，但本发明并不以此为限。
[0025]在本发明中，替代图片被用来暂时取代相对应的目标图片在目标网页上呈现，替代图片在目标网页中的位置会与相对应的目标图片在目标网页中的位置相同。另外，替代图片的尺寸大小会与浏览器表示目标图片所使用的替代物件的尺寸大小相同。其中，浏览器所使用的替代物件是在目标图片未被浏览器载入前，用来在目标网页中表示未被载入的目标图片的图像(icon)等物件。
[0026]以下先以「图1」本发明所提的依据可视区域在网页中显示图片的系统架构图来说明本发明的系统运作。如「图1」所示，本发明的系统含有物件搜寻模块110、相对位置判断模块130、以及属性修改模块150。
[0027]物件搜寻模块110负责搜寻目标网页中的所有图片物件(image object)。一般而言，物件搜寻模块110可以通过目标网页中的文件物件模型(Document Object Model, DOM)取得目标网页中的所有物件，并依据所取得的物件的属性(property)判断所取得的物件是否为图片物件。
[0028]目标网页中的每一个图片物件都可以对应到一张图片，在本发明中，与图片物件对应的图片被称为「目标图片」。其中，目标图片可以被浏览器显示在目标网页的网页内容中。
[0029]相对位置判断模块130负责在浏览器完成目标图片的载入时，判断与载入完成的目标图片相对应的替代图片与目标网页的可视区域的相对位置。其中，相对位置判断模块130可以通过图片物件在目标图片完成载入时所产生的载入完成的网页事件(onCompleteevent)判断出目标图片已经完成载入，但相对位置判断模块130判断目标图片完成载入的方式并不以此为限。
[0030]相对位置判断模块130也负责在目标网页的可视区域发生变化时，判断载入完成的目标图片与目标网页的可视区域的相对位置。其中，相对位置判断模块130可以监听浏览器的操作事件，并在监听到可以让目标网页的可视区域发生变化事件时，如监听到画面卷动事件、画面放大事件等，判断目标网页的可视区域发生变化，但相对位置判断模块130判断目标网页的可视区域发生变化的方式并不以此为限