Bagaimana untuk Memaparkan Imej secara Dinamik daripada URL dan Mengelakkan Caching Penyemak Imbas?

Memaparkan Imej Dinamik dengan URL Dicache

Pertimbangkan senario di mana anda mendapatkan semula imej daripada URL tertentu, memastikan setiap akses menghasilkan unik imej. Walau bagaimanapun, apabila cuba mengemas kini imej pada halaman, imej kekal tidak berubah melainkan halaman dimuat semula.

Kod JavaScript untuk Paparan Imej

Kod JavaScript berikut menggambarkan paparan imej dan mekanisme muat semula:

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

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

  setTimeout(updateImage, 1000);
}

Dalam senario yang diberikan, imej tidak dikemas kini kerana kepada potensi penyemak imbas untuk cache imej pada URL yang ditentukan. Ini boleh menghalang penyemak imbas daripada mengambil versi imej terbaharu.

Mengatasi Masalah Cache

Untuk memaksa muat semula imej, URL boleh ditambah dengan pemecah cache. Ini akan memastikan bahawa penyemak imbas mengambil imej terus daripada pelayan dan bukannya bergantung pada versi cache. Kod yang dipinda akan termasuk:

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

Tambahan ini memastikan bahawa cap masa semasa dilampirkan pada URL setiap kali imej dicipta. Akibatnya, penyemak imbas akan mendapatkan semula imej daripada pelayan dan bukannya mengakses versi cache. Dengan menambahkan pemecah cache ini, imej pada halaman akan dikemas kini secara dinamik, mencerminkan versi terkini yang disediakan oleh pelayan.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Imej secara Dinamik daripada URL dan Mengelakkan Caching Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!