通常玩部落格最头痛的就是开一个网页要下载大量的物件，如果一个部落格含有大量的图片，音乐和Flash动画，那么无论是对宽频或窄频的用户都是一种困扰。为了不让下载网页体型过大，一般的方法是将embedded的player的Autostart特性设为零，或将Flash动画用Preloader的技术将下载延迟。不过这些方法还是得让用户下载大量的数据后才能够实现。这里介绍一个运用Javascript HTML DOM(Document Object Model)的方法来解决这个问题。DOM是W3C在1998年定下的一个浏览器物件标准，其涵盖的控制范围包括HTML,XML,CSS等等，目的主要是解决之前浏览器之间的兼容问题和开发新一代的浏览器物件模式。我们这里利用DOM的原因是它比较容易操作，而且能够在大部分的浏览器里面运作(注：IE5或Netscape6以下的浏览器不支持DOM)。

在我部落格首页右边的Nix Gallery就是利用这种方法来延迟图片下载的一个例子，当你按下Open的按钮之后，照片才会开始下载而无需刷新浏览器。如何开始呢？别紧张，首先在你的HTML文件里创建一个DIV容器，然后再给他一个ID，你稍后会利用到这个容器来下载你要的内容。

<div id="dContainer"></div>

接下来就把工作全部交给Javascript了，以下列出一些在稍后会用到的DOM函式，以便作参考：


document.getElementById("myElement"); //提取文件内ID为"myElement"的物件
document.createElement("H2"); //生成一个新的H2 HTML物件；
document.createTextNode("text"); //生成一个字串结；
element.appendChild(newElement); //将新物件插入现有物件内
element.hasChildNode(); //检查该物件是否已有子物件



由于DIV本身目前并无具备任何内容，当用户开始要求下载，Javascript才开始将内容植入DIV内。将以下的源码拷贝到你的网页 script 标签里。

function displayImg(divId){

if(document.getElementById){ //test if browser is DOM supported
var dContainer = document.getElementById(divId);
}else{
return false;
}

if(dContainer.hasChildNodes()){ //test if container already loaded
return true;
}

var newImg = document.createElement("IMG"); //create new HTML img tag
var newText = document.createTextNode("Picture: Testing Only"); //create another textnode as description

newImg.src = "http://example.com/img01.jpg";
newImg.alt = "This is a test image";

dContainer.appendChild(newImg);
dContainer.appendChild(newText);

return true;
}


然后在DIV的上面加入一个Button，以便呼叫以上的Javascript函式。

<input type="button" value="open Img" onclick="displayImg('dContainer')">

如果一切无误，在你按下open Img之后，图片将会在div的位置出现。

在以上的例子里，你应该可以了解到如果你有大量的内容要延迟下载的话，这个将会是一个很好的解决方案。DOM除了可以加入HTML元件外，也可以加入CSS特性，例如： img.style.color=#fff ；而且也可以在XML，XHTML文件内通用，这个在最近被大部分大型网站采用的技术AJAX里也可以看到。

有关于更多DOM的教学，可以参考这里

http://www.w3schools.com/dom/default.asp

DOM的主页

http://www.w3.org/DOM/