在Web開發過程中,圖片刷新是一個經常出現的需求,jQuery為此提供了img方法,可以方便地實現圖片的刷新和重新加載。
$(function(){ //獲取圖片元素 var img = $('img'); //刷新圖片 img.attr('src', img.attr('src')); });
以上代碼中,首先使用jQuery選擇器獲取圖片元素,然后使用attr方法獲取圖片的src屬性,并將其重新賦值,以達到刷新圖片的效果。
除了使用attr方法刷新圖片,還可以使用toggleClass方法來刷新圖片。代碼如下:
$(function(){ //獲取圖片元素 var img = $('img'); //切換class img.toggleClass('refresh'); });
以上代碼中,使用toggleClass方法來切換圖片元素的class屬性,當class屬性被修改時,瀏覽器會自動重新加載圖片。
需要注意的是,由于瀏覽器會緩存圖片,如果只是簡單地刷新圖片,可能會導致瀏覽器從緩存中讀取圖片,而不是從服務器上重新獲取。解決這個問題的方法是,添加時間戳參數,強制讓瀏覽器重新獲取圖片,代碼如下:
$(function(){ //獲取圖片元素 var img = $('img'); //添加時間戳參數,強制刷新圖片 img.attr('src', img.attr('src') + '?' + new Date().getTime()); });
以上代碼中,使用new Date().getTime()方法獲取當前時間戳,并將其添加到圖片的src屬性值后面,從而使瀏覽器強制重新獲取該圖片。
下一篇dockerdocs