有選擇地顯示預加載內容提高網站的性能

2019-11-18 13:11:34

字體：大中小

來源：轉載

供稿：網友

　　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>
　　<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>
　　
　　這段代碼使用了第一個標題元素的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>
　　<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>
　　
　　這段代碼包括了一個用來隱藏所有DIV元素的JavaScript函數。當文檔被加載的時候，這個函數就被調用了。點擊每個超鏈接將會顯示相關的區域并隱藏其他的區域。這種方式的一個弱點是，只有Internet Explorer 5或者更高版本的瀏覽器以及Netscape Navigator 6或者更高版本的瀏覽器才支持這些方法。但是，我使用Mozilla 1.01測試過，沒有問題。
　　
　　只在必要的時候才顯示信息
　　將DHTML和JavaScript的強大能力組合起來使用，就能夠讓你預加載頁面的內容，并在適當的時候顯示其各個部分。這樣就可以提高響應時間，因此能夠為用戶提供更高的性能。

上一篇：用狀態欄提示改善JavaGUI

下一篇：使用ObjectStream會出現的問題