在使用jQuery動態加載圖片時,有時我們希望在不改變圖片地址的情況下,實現圖片內容的更換。這就需要用到圖片的緩存機制,即當圖片加載完成后,在不刷新頁面的情況下,直接把圖片的源更換成新圖片的源。
為了實現這個功能,我們可以通過以下代碼來防止圖片緩存以及更換圖片源:
$(document).ready(function() { var imageUrl = "new-image.jpg"; $.ajax({ url: imageUrl, cache: false }).done(function() { var img = $("<img>"); img.attr("src", imageUrl); $("body").append(img); setInterval(function() { $.ajax({ url: imageUrl, cache: false, success: function() { img.attr("src", imageUrl); } }); }, 1000); }); });
此段代碼中,我們首先通過AJAX請求將圖片加載進來,并防止圖片緩存。接下來,我們將圖片源設置為AJAX請求的地址,并加入到頁面中。然后,我們通過setInterval函數來循環請求圖片,保證圖片是最新的,并替換原來圖片的源。這樣就可以實現圖片內容的更換,而不改變圖片地址了。
上一篇div 是啥
下一篇jquery設置下拉菜單