JavaScript是一門廣泛使用的腳本語言，可以在HTML頁面中動態地操控網頁元素和交互。其中，img.src是一個重要的屬性，它可以通過JavaScript來改變一個圖片的路徑，從而更改圖片的顯示效果。 舉個例子，假設有一個網頁需要在用戶點擊一個按鈕后展示一張全新的圖片。那么就可以使用JavaScript來創建一個點擊事件函數，在函數內部改變圖片的路徑。具體的代碼如下：

function changeImage() {
var image = document.getElementById("myImage");
image.src = "newimage.jpg";
}

在上述代碼中，我們使用了document對象來找到ID為"myImage"的標簽，并使用".src"屬性改變了圖片的路徑，把它變成"newimage.jpg"。現在，每次用戶點擊切換圖片的按鈕，就會把展示圖片從原來的圖片換成全新的圖片。 但是，有些時候，可能會發生圖片無法加載的情況。比如說，用戶在網速較差的情況下打開網頁，但圖片下載時間過長，導致圖片無法顯示。這時候，我們需要一種方法來處理這種問題。 可以使用以下代碼來檢查圖片是否已加載：

var image = document.getElementById("myImage");
if (image.complete) {
console.log("Image loaded");
} else {
console.log("Image not yet loaded");
}

在這里，我們使用了".complete"屬性來檢查圖片是否已經被加載。如果圖片已經成功加載，log中就會輸出"Image loaded"，否則輸出"Image not yet loaded"。 此外，在實際情況中我們也可以使用JavaScript來預加載圖片。簡單來說，我們可以通過JavaScript將需要加載的圖片提前加載到瀏覽器的緩存中，以便在用戶需要時能夠更快速地顯示圖片。以下代碼可作為預加載圖片的例子：

function preloadImages() {
var image = new Image();
image.src = "image1.jpg";
var image2 = new Image();
image2.src = "image2.jpg";
var image3 = new Image();
image3.src = "image3.jpg";
}
window.onload = preloadImages;

在上述代碼中，我們使用了window.onload事件來預加載圖片。當整個頁面都加載完成時，我們就會通過JavaScript將3張圖片預先加入緩存。這樣，在需要顯示這些圖片時，它們就已經在用戶的瀏覽器緩存中，從而提高了網頁加載速度和用戶體驗。 總之，JavaScript中的img.src屬性不僅可以用來動態地更改圖片路徑，還可以用于檢查圖片是否已加載和預加載圖片。這些操作可以用于優化網頁速度和提高用戶體驗，達到更好的效果。