有选择地显示预加载内容提高网站的性能

王朝html/css/js·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

HTML页面内的每个元素都可以通过JavaScript来访问。DHTML的样式属性包含有可视性属性,后者能够让你控制是否在页面上显示元素的内容。要做到这一点,你就要把属性设置为可视或者隐藏。下面的句法能够让用户通过JavaScript来访问这个属性:

document.element_name.style.visibility = "visible"

或者

document.element_name.style.visibility = "hidden";

真正的元素通过使用其ID属性和JavaScript的getElementById方法就能够轻易被找到:

document.getElementById("element name").style.visibility = "hidden";

要记住,HTML元素都被分配了ID属性,用来在页面里区分它们。这就允许DHTML和JavaScript能够定位并使用各个独立的元素。下面的HTML示例将不同的名称分配给了HTML标题(header)的元素,并使用JavaScript来显示和隐藏第二个标题:

<html

<head

<titlediv test</title

</head

<body

<h1

id="header1"

onMouseOver='document.getElementById("header2").style.visibility="hidden";'

onMouseOut='document.getElementById("header2").style.visibility = "visible";'

Now you see it!

</h1

<h2 id="header2"

Now you don't!

</h2

</body

</html

这段代码使用了第一个标题元素的onMouseOver和onMouseOut事件,用来显示和隐藏第二个标题元素。要注意,通过ID属性分配给第二个标题的名称,是用来控制其在JavaScript里可视程度的。

在一次只需要显示文档的一部分的时候,显示和隐藏元素的方法是好处颇多的。它可以用于菜单、扩展/压缩页面的区域,以及其他等等。你可以对任何HTML的元素使用这个技巧,但是在处理页面大块区域的时候,DIV元素将是它的一个主要竞争对手。

什么是DIV?

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。Internet Explorer和Netscape的浏览器都支持DIV标签。

DIV和SPAN

很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性上相同,但是SPAN是用来定义内嵌内容而不是大块内容的。你可以对段落使用DIV标签,但是SPAN对于为段落内的一个或者多个字赋予特殊的特性很有用。

DIV标签允许你分割一个Web页面,以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用,用以分割页面的内容,并显示你所选择的内容。下面这段示例代码使用了DIV标签将该页面分割成了多个区域;超链接会显示和隐藏这些区域:

<html<head

<titlediv test</title

<script language="JavaScript"

function setAllVisible() {

document.getElementById("section1").style.visibility="hidden";

document.getElementById("section2").style.visibility="hidden";

document.getElementById("section3").style.visibility="hidden";

document.getElementById("section4").style.visibility="hidden";

}

</script</head

<body onLoad='setAllVisible();'

<h1Builder.com Sample</h1

<ul

<li<a href="#"

onClick='

document.getElementById("section1").style.visibility="visible";

document.getElementById("section2").style.visibility="hidden";

document.getElementById("section3").style.visibility="hidden";

document.getElementById("section4").style.visibility="hidden";'Section 1</a</li

<li<a href="#"

onClick='

document.getElementById("section1").style.visibility="hidden";

document.getElementById("section2").style.visibility="visible";

document.getElementById("section3").style.visibility="hidden";

document.getElementById("section4").style.visibility="hidden";'Section 2</a</li

<li<a href="#"

onClick='

document.getElementById("section1").style.visibility="hidden";

document.getElementById("section2").style.visibility="hidden";

document.getElementById("section3").style.visibility="visible";

document.getElementById("section4").style.visibility="hidden";'Section 3</a</li

<li<a href="#"

onClick='

document.getElementById("section1").style.visibility="hidden";

document.getElementById("section2").style.visibility="hidden";

document.getElementById("section3").style.visibility="hidden";

document.getElementById("section4").style.visibility="visible";'Section 4</a</li

</ul<br

<div id="section1"Section 1 text.</div

<div id="section2"Section 2 text.</div

<div id="section3"Section 3 text.</div

<div id="section4"Section 4 text.</body

</html

这段代码包括了一个用来隐藏所有DIV元素的JavaScript函数。当文档被加载的时候,这个函数就被调用了。点击每个超链接将会显示相关的区域并隐藏其他的区域。这种方式的一个弱点是,只有Internet Explorer 5或者更高版本的浏览器以及Netscape Navigator 6或者更高版本的浏览器才支持这些方法。但是,我使用Mozilla 1.01测试过,没有问题。

只在必要的时候才显示信息

将DHTML和JavaScript的强大能力组合起来使用,就能够让你预加载页面的内容,并在适当的时候显示其各个部分。这样就可以提高响应时间,因此能够为用户提供更高的性能。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航