熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

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

2013-11-11 21:10:04  來源: Javascript 

  HTML頁面內的每個元素都可以通過JavaScript來訪問DHTML的樣式屬性包含有可視性屬性後者能夠讓你控制是否在頁面上顯示元素的內容要做到這一點你就要把屬性設置為可視或者隱藏下面的句法能夠讓用戶通過JavaScript來訪問這個屬性
  documentelement_namestylevisibility = visible
  
  或者
  documentelement_namestylevisibility = hidden;
  
  真正的元素通過使用其ID屬性和JavaScript的getElementById方法就能夠輕易被找到
  documentgetElementById(element name)stylevisibility = hidden;
  
  要記住HTML元素都被分配了ID屬性用來在頁面裡區分它們這就允許DHTML和JavaScript能夠定位並使用各個獨立的元素下面的HTML示例將不同的名稱分配給了HTML標題(header)的元素並使用JavaScript來顯示和隱藏第二個標題
  <html>
  <head>
  <title>div test</title>
  </head>
  <body>
  <h
  id=header
  onMouseOver=documentgetElementById(header)stylevisibility=hidden;
  onMouseOut=documentgetElementById(header)stylevisibility = visible;>
  Now you see it!
  </h>
  <h id=header>
  Now you dont!
  </h>
  </body>
  </html>
  
  這段代碼使用了第一個標題元素的onMouseOver和onMouseOut事件用來顯示和隱藏第二個標題元素要注意通過ID屬性分配給第二個標題的名稱是用來控制其在JavaScript裡可視程度的
  
  在一次只需要顯示文檔的一部分的時候顯示和隱藏元素的方法是好處頗多的它可以用於菜單擴展/壓縮頁面的區域以及其他等等你可以對任何HTML的元素使用這個技巧但是在處理頁面大塊區域的時候DIV元素將是它的一個主要競爭對手
  
  什麼是DIV?
  DIV元素是用來為HTML文檔內大塊(blocklevel)的內容提供結構和背景的元素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() {
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  }
  </script></head>
  <body onLoad=setAllVisible();>
  <h> Sample</h>
  <ul>
  <li><a #
  onClick=
  documentgetElementById(section)stylevisibility=visible;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;>Section </a></li>
  <li><a #
  onClick=
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=visible;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;>Section </a></li>
  <li><a #
  onClick=
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=visible;
  documentgetElementById(section)stylevisibility=hidden;>Section </a></li>
  <li><a #
  onClick=
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=hidden;
  documentgetElementById(section)stylevisibility=visible;>Section </a></li>
  </ul><br>
  <div id=section>Section text</div>
  <div id=section>Section text</div>
  <div id=section>Section text</div>
  <div id=section>Section text</body>
  </html>
  
  這段代碼包括了一個用來隱藏所有DIV元素的JavaScript函數當文檔被加載的時候這個函數就被調用了點擊每個超鏈接將會顯示相關的區域並隱藏其他的區域這種方式的一個弱點是只有Internet Explorer 或者更高版本的浏覽器以及Netscape Navigator 或者更高版本的浏覽器才支持這些方法但是我使用Mozilla 測試過沒有問題
  
  只在必要的時候才顯示信息
  將DHTML和JavaScript的強大能力組合起來使用就能夠讓你預加載頁面的內容並在適當的時候顯示其各個部分這樣就可以提高響應時間因此能夠為用戶提供更高的性能
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/8550.html
  • 上一篇文章: 没有了

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.