[发明专利]依据可视区域在网页中显示图片的系统及其方法

说明书

技术领域

本发明涉及一种网页图片显示系统及其方法，特别是指一种依据可视区域在网页中显示图片的系统及其方法。

背景技术

在浏览器中，网页中的超文本标记语言（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        可视区域

具体实施方式