Czy możliwe jest zaktualizowanie obrazu CSS wskazanego przez przeszedł adres URL w "backgound-image: \"<some-url>\" w JavaScript tylko wtedy, gdy obraz źródłowy zostanie zmieniony na serwerze. To znaczy. Pamięć podręczna Obraz, a następnie odzyskać obraz z serwera, gdy trzeba było przeładować i porównać go z buforowanym obrazem. Następnie przeładuj go, gdy tylko jest aktualizowany. Wiem, że aby odświeżyć obraz w CSS przez JavaScript, obraz musi mieć inny ciąg po "?" W źródle obrazu i jeden sposób, aby to zrobić, jest użyciem bieżącego czasu zwracanego przez metodę Date.getTime po "?". Na przykład. (Dostałem tę metodę stąd https://stackoverflow.com/a/1077051/7000599):

$(".some-css-class").css("backgound-image", "url(" + "\"" + some_source + "?" + new Date().getTime() + "\"" + ")");

Chciałbym jednak zadzwonić do powyższej logiki, gdy muszę zaktualizować background-image tylko wtedy, gdy wykryje obraz został zmieniony. Czy istnieje sposób na wykrycie takich zmian?

0
falhumai96 27 czerwiec 2017, 02:13

4 odpowiedzi

Najlepsza odpowiedź

Podobnie jak w przypadku @Nosyara, myślę, że lepsze podejście do tego problemu, które znalazłem do tej pory, jest za pomocą headera HTTP ETag, aby wykryć, czy obraz źródłowy (lub plik jako dobrze) jest zmieniany z ostatniego plik buforowany. Myślę, że odpowiedź oboksijażu również pracuje (tj. Za pomocą nagłówka {X1}}), ale z jakiegoś powodu nie wykazuje żadnych zmian, gdy obraz źródłowy (lub plik) zostanie zmieniony. Zrobiłem prosty lokalny serwer Apache i prostą stronę internetową z javascript onInterval wydarzenie na console.log, czy plik zmienił się, czy nie, ale nie wydaje się tak. Tak najwyraźniej ETag jest sposobem na to. Oto strona Wikipedia wyjaśniająca to także cele (ma też inne cele): https://en.wikipedia.org / Wiki / http_etag.

0
falhumai96 29 czerwiec 2017, 06:13

Aby automatycznie zaktualizować obraz przez sam JavaScript (bez opłacania się na dowolnym skrypcie z tyłu), trzeba było okresowo odpychać serwer w celu sprawdzenia, czy data modyfikacji była większa niż buforowana kopia obrazu. Następnie musisz odświeżyć stronę, jeśli tak było.

Zostało to zrobione podobne do następujących:

var previous = null;
var current = null;
var image_url = 'IMAGE URL';
setInterval(function() {
  var req = new XMLHttpRequest(); // Poll the server
  req.open("HEAD", image_url, false);
  req.send(null);
  if (req.status == 200) {
    current = req.getResponseHeader('Last-Modified'); // Get modification time
  }
  if (previous && current && previous !== current) { // If it's been modified
    location.reload(); // Refresh
  }
  previous = current; // Store the 'new' image information
  $(".come-css-class").css("background-image", "url(" + "\"" + image_url + "\""); // Update the image
}, 2000); // Repeat every two seconds

Należy również pamiętać, że nazwałeś to backgound-image w pytaniu. Musisz zapewnić, że nazywasz to background-image, aby działać poprawnie.

Mam nadzieję że to pomoże! :)

0
Obsidian Age 26 czerwiec 2017, 23:31

Możesz dodać API do strony serwera, który zwraca wartość zniesienia zawartości obrazu. Więc kiedy umieścisz obraz po raz pierwszy - dodaj wartość skrótu dla określonego obrazu po "?".

$(".come-css-class").css("backgound-image", "url(" + "\"" + some_source + "?" + imageHash + "\"" + ")");

Niż od czasu do czasu zadzwoń do interfejsu API Hash i wymień nieruchomość obrazu. Gdy obraz zostanie zaktualizowany na serwerze - zwróci nową wartość Hash - więc CSS przeładowuje obraz.

0
Oleg Imanilov 26 czerwiec 2017, 23:19

Daj każdemu obrazowi unikalny identyfikator, a następnie sondować serwer każdego często, aby sprawdzić, czy jest nowy identyfikator, a jeśli tak, zmień podstawowy obraz.

0
Difster 26 czerwiec 2017, 23:19