有選擇地顯示預(yù)加載內(nèi)容提高網(wǎng)站的性能

2019-11-18 13:11:34

字體：大中小

供稿：網(wǎng)友

　　Html頁面內(nèi)的每個(gè)元素都可以通過javascript來訪問。DHTML的樣式屬性包含有可視性屬性，后者能夠讓你控制是否在頁面上顯示元素的內(nèi)容。要做到這一點(diǎn)，你就要把屬性設(shè)置為可視或者隱藏。下面的句法能夠讓用戶通過Javascript來訪問這個(gè)屬性：
　　document.element_name.style.visibility = "visible"
　　
　　或者
　　document.element_name.style.visibility = "hidden";
　　
　　真正的元素通過使用其ID屬性和JavaScript的getElementById方法就能夠輕易被找到：
　　document.getElementById("element name").style.visibility = "hidden";
　　
　　要記住，HTML元素都被分配了ID屬性，用來在頁面里區(qū)分它們。這就答應(yīng)DHTML和JavaScript能夠定位并使用各個(gè)獨(dú)立的元素。下面的HTML示例將不同的名稱分配給了HTML標(biāo)題（header）的元素，并使用JavaScript來顯示和隱藏第二個(gè)標(biāo)題：
　　<html>
　　<head>
　　<title>div 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>
　　
　　這段代碼使用了第一個(gè)標(biāo)題元素的onMouseOver和onMouseOut事件，用來顯示和隱藏第二個(gè)標(biāo)題元素。要注重，通過ID屬性分配給第二個(gè)標(biāo)題的名稱，是用來控制其在JavaScript里可視程度的。
　　
　　在一次只需要顯示文檔的一部分的時(shí)候，顯示和隱藏元素的方法是好處頗多的。它可以用于菜單、擴(kuò)展／壓縮頁面的區(qū)域，以及其他等等。你可以對(duì)任何HTML的元素使用這個(gè)技巧，但是在處理頁面大塊區(qū)域的時(shí)候，DIV元素將是它的一個(gè)主要競(jìng)爭對(duì)手。
　　
　　什么是DIV？
　　DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。Internet EXPlorer和Netscape的瀏覽器都支持DIV標(biāo)簽。
　　
　　DIV和SPAN
　　很多開發(fā)人員都把DIV元素同SPAN元素弄混淆了。盡管它們?cè)谔匦陨舷嗤荢PAN是用來定義內(nèi)嵌內(nèi)容而不是大塊內(nèi)容的。你可以對(duì)段落使用DIV標(biāo)簽，但是SPAN對(duì)于為段落內(nèi)的一個(gè)或者多個(gè)字賦予非凡的特性很有用。
　　
　　DIV標(biāo)簽答應(yīng)你分割一個(gè)Web頁面，以此來進(jìn)行格式化和演示。可以將它和可視性的技巧組合起來使用，用以分割頁面的內(nèi)容，并顯示你所選擇的內(nèi)容。下面這段示例代碼使用了DIV標(biāo)簽將該頁面分割成了多個(gè)區(qū)域；超鏈接會(huì)顯示和隱藏這些區(qū)域：
　　<html><head>
　　<title>div 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();'>
　　<h1>Builder.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>
　　
　　這段代碼包括了一個(gè)用來隱藏所有DIV元素的JavaScript函數(shù)。當(dāng)文檔被加載的時(shí)候，這個(gè)函數(shù)就被調(diào)用了。點(diǎn)擊每個(gè)超鏈接將會(huì)顯示相關(guān)的區(qū)域并隱藏其他的區(qū)域。這種方式的一個(gè)弱點(diǎn)是，只有Internet Explorer 5或者更高版本的瀏覽器以及Netscape Navigator 6或者更高版本的瀏覽器才支持這些方法。但是，我使用Mozilla 1.01測(cè)試過，沒有問題。
　　
　　只在必要的時(shí)候才顯示信息
　　將DHTML和JavaScript的強(qiáng)大能力組合起來使用，就能夠讓你預(yù)加載頁面的內(nèi)容，并在適當(dāng)?shù)臅r(shí)候顯示其各個(gè)部分。這樣就可以提高響應(yīng)時(shí)間，因此能夠?yàn)橛脩籼峁└叩男阅堋?br>

上一篇：用狀態(tài)欄提示改善JavaGUI

下一篇：使用ObjectStream會(huì)出現(xiàn)的問題