在現(xiàn)代網(wǎng)站中，圖片是不可或缺的元素之一。然而在網(wǎng)絡(luò)中傳輸大量圖片，尤其是大尺寸的圖片，會(huì)導(dǎo)致網(wǎng)頁(yè)額外的加載時(shí)間，影響用戶體驗(yàn)。如何在不犧牲視覺體驗(yàn)的前提下，減少圖片加載時(shí)間呢？Javascript 動(dòng)態(tài)加載圖片大小可以成為一種可行的解決方案。 動(dòng)態(tài)加載圖片大小的概念比較容易理解，即在加載網(wǎng)頁(yè)時(shí)，先顯示一個(gè)尺寸較小的圖片，待圖片下載完成后，再替換成真實(shí)尺寸的圖片。以圖片懶加載（lazy loading）技術(shù)為例，下面給出一個(gè)常見的實(shí)現(xiàn)方式：

function addImage(img, callback) {
var tempImg = new Image();
tempImg.onload = callback;
tempImg.src = img.dataset.src;
img.src = "placeholder.gif";
}

在這個(gè)例子中，我們傳遞兩個(gè)參數(shù)。第一個(gè)參數(shù) “img” 指的是我們?cè)?HTML 中定義好的標(biāo)簽.. 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，表示當(dāng)真實(shí)尺寸的圖片被成功加載后，我們執(zhí)行的操作。接下來(lái)，我們創(chuàng)建了一個(gè)“臨時(shí)圖片”對(duì)象 “tempImg”。這個(gè)對(duì)象的作用在于，我們?cè)诩虞d大尺寸圖片之前，先加載一張尺寸比較小的圖片（比如一個(gè) loading icon），作為占位符，以便盡早地展現(xiàn)網(wǎng)頁(yè)內(nèi)容。接著，我們將上述步驟所需的圖片地址傳給我們定義好的 tempImg.src。最后，一旦 tempImg 加載成功后，我們?cè)賹D片的實(shí)際路徑 img.src 賦值給img。 動(dòng)態(tài)加載圖片不僅可以減少圖片加載時(shí)間，同時(shí)大大降低了帶寬的占用率，也可以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，提升網(wǎng)頁(yè)的性能。當(dāng)然，在實(shí)踐中還需要考慮很多細(xì)節(jié)問題，比如如何設(shè)置占位符的大小，如何避免圖片閃爍等等。總之，在實(shí)際應(yīng)用中，動(dòng)態(tài)加載圖片是一種非常實(shí)用的技術(shù)手段，可以讓網(wǎng)頁(yè)站長(zhǎng)更好地管理和優(yōu)化所需加載的圖片，讓網(wǎng)站設(shè)計(jì)實(shí)現(xiàn)更加優(yōu)秀和出色。