Mengapa Imej Saya Dimuatkan Secara Dinamik Tidak Mengemas kini Tanpa Muat Semula Halaman?

Penyelesaian Masalah: Imej Tidak Dikemas Kini Secara Dinamik

Apabila mengakses pautan yang menyediakan imej baharu setiap kali ia diminta, anda mungkin menghadapi masalah apabila imej dimuatkan dalam latar belakang gagal dikemas kini pada halaman melainkan anda memuat semula halaman.

Kod di bawah menggambarkan isu:

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        number++;
        newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
    }

    setTimeout(updateImage, 1000);
}

Dalam senario ini, imej tidak dikemas kini pada halaman walaupun pengepala permintaan menunjukkan bahawa caching dilumpuhkan:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache

Penyelesaian: Pemecah Cache

Untuk memaksa muat semula imej, tambahkan pemecah cache pada penghujung URL:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

Dengan menambahkan cap masa semasa, anda memastikan penyemak imbas akan mendapatkan semula imej daripada pelayan dan bukannya menggunakan versi cache. Teknik ini akan membolehkan imej dikemas kini secara dinamik pada halaman seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Imej Saya Dimuatkan Secara Dinamik Tidak Mengemas kini Tanpa Muat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!