HTML5 是目前最流行的網(wǎng)頁(yè)開發(fā)語(yǔ)言之一。經(jīng)常我們會(huì)在網(wǎng)站中使用圖片來呈現(xiàn)信息和美化界面。但是，有時(shí)候我們并不想讓這些圖片被瀏覽器緩存，從而減少服務(wù)器帶寬的占用和提高頁(yè)面加載速度。

下面讓我們來看看如何利用 HTML5 來設(shè)置不緩存圖片。

<img src="example.jpg" alt="Example Image" width="500" height="500" 
oncontextmenu="return false;" 
ondragstart="return false;" 
style="user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;" 
onclick="window.location.reload(true);"/>

在上面的代碼中，我們可以看到 img 標(biāo)簽內(nèi)的部分。它包括了圖片的路徑（src）、圖片的寬度和高度、右鍵菜單、拖拽等屬性。

其中最重要的部分是 onclick 屬性，該屬性的作用是在用戶單擊圖片時(shí)，強(qiáng)制瀏覽器從服務(wù)器重新加載該圖片（包括更新過的圖片）。

另外，我們還可以添加一些其他屬性來禁止用戶將圖片拖拽到自己的電腦上，從而減少不必要的帶寬占用。代碼如下：

<img src="example.jpg" alt="Example Image" width="500" height="500" 
oncontextmenu="return false;" 
ondragstart="return false;" 
style="user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;" 
onclick="window.location.reload(true);" 
onmousedown="if(event.button==2) event.stopPropagation();" />

通過以上方法，我們可以在 HTML5 頁(yè)面中設(shè)置不緩存圖片效果，提高頁(yè)面加載速度，減少服務(wù)器帶寬占用。