HTML5是一種新的網頁標準，它可以優化網頁的用戶體驗，尤其是在加載圖片方面，特別是人物行走，更加生動有趣。以下是一些HTML5加載圖片人物行走的代碼示例：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "walking.png";
var sx = 0; 
var sy = 0;
var sw = 64; 
var sh = 64;
var dx = 0;
var dy = 200;
var dw = 64;
var dh = 64;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
sx += sw;
if (sx >192) {
sx = 0;
}
requestAnimationFrame(animate);
}
img.addEventListener("load", function() {
animate();
});
</script>

上面的代碼包括以下幾個部分：

1. 創建畫布

使用<canvas>標簽創建畫布，設置寬度和高度。

<canvas id="myCanvas" width="400" height="300"></canvas>

2. 獲取畫布的上下文

使用canvas.getContext("2d")獲取畫布的上下文。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3. 加載圖片

使用new Image()創建圖片對象，設置src屬性，加載圖片。

var img = new Image();
img.src = "walking.png";

4. 繪制圖片

使用ctx.drawImage()方法繪制圖片。

ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

5. 動畫

使用requestAnimationFrame()方法實現圖片的動畫效果。

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
sx += sw;
if (sx >192) {
sx = 0;
}
requestAnimationFrame(animate);
}

6. 監聽圖片加載完成事件

使用img.addEventListener("load", function(){...})方法監聽圖片加載完成事件，加載完成后開始實現動畫。

img.addEventListener("load", function() {
animate();
});

通過以上步驟，我們就可以使用HTML5加載圖片人物行走的效果了。這一代碼示例可以應用于游戲開發等方面。