Aktualizowanie obrazu bez przeładowania strony

W jaki sposób zaktualizować obraz, który będzie aktualizowany na serwerze co kilka sekund, bez konieczności naciskania przycisku odświeżania, moim pierwszym domniemaniem był ajax, ale tak naprawdę nie działałem z tym wcześniej. Czy ktoś może wskazać mi właściwy kierunek?Aktualizowanie obrazu bez przeładowania strony

EDIT: Zapomniałem wspomnieć, że obraz jest .gif generowane przez skrypt perla - próbując chwycić go url powrotu skrypt

Źródło

2011-06-28 Mehran

Mówisz" próbujesz pobrać go przez url, zwróć skrypt ", ale sugerujesz, że obecnie możesz ponownie załadować obraz przez odświeżenie strony. Musi więc istnieć adres URL, który pobiera obraz. Czy możesz zmodyfikować swoje pytanie, dodając do niego kod HTML dla znacznika img, który można znaleźć podczas przeglądania źródła? – gilly3

@ gilly3 brak źródła strony cała strona jest po prostu obrazem generowanym przez skrypt perl, stąd nie ma tagu img, nie ma html. Chciałem pobrać ten obraz włożyć go na stronę internetową i odświeżyć go, aby zaktualizować obraz, który jest generowany z skrypt perla – Mehran

Wygląda na to, że coś jest nie tak z twoim skryptem Perla. Próba uzyskania dostępu do obrazu za pomocą adresu URL powinna mimo to zwrócić obraz. Powinien zwracać dane binarne, a nie skrypt. Powinieneś także ustawić nagłówek typu treści odpowiedzi na image/gif. Sprawdź, czy rzeczywiście zwraca dane binarne, zanim spróbujesz naprawić swój kod JavaScript.

Źródło

2011-06-28 16:55:56 fromvega

Dziękuję bardzo za scenariusz. – Mehran

wystarczy użyć javascript, aby zaktualizować właściwość src img.

HTML:

<img src="..." id="myImage" />

JS:

document.getElementById("myImage").src = "http://....";

Jeśli chcesz go na zegar, zrób coś takiego:

setInterval(function() { ... }, 4000);

Jeśli masz problem z buforowaniem, dodaj losowy ciąg zapytania na końcu adresu URL: "? rnd = randomNumberHere"

Źródło

2011-06-28 16:44:02 Steve

zrobić coś takiego

 
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

zmienia atrybut src tagu obrazu (o identyfikatorze „yourimage”) i dodaje losowy ciąg kwerendy do niego, zmuszając przeglądarkę, aby ponownie załadować obraz za każdym razem, gdy go zmienić.

 
window.setInterval(function() 
{ 
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime(); 
}, 5000);

Źródło

2011-06-28 16:44:58

co X sekund wysłać Ajax do serwera:

aby odświeżyć obraz co 5 sekund, coś takiego zrobić. jeśli link obrazu z odpowiedzi == poprzedni, bez aktualizacji, jeśli link nowy: $('img.class').attr('src','link');

Źródło

2011-06-28 16:47:18 bravedick

Nie jest wymagana AJAX, zaktualizuj właściwość obrazu src. Ale ponieważ ma ten sam adres URL, musisz podać przeglądarce unikalny adres, aby nie ładować starego obrazu z pamięci podręcznej przeglądarki. Możesz zagwarantować unikatowy obraz, pobierając numer seryjny bieżącej daty przez new Date().valueOf() i dołączając go do adresu URL w postaci zapytania.

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

Można również użyć new Date().getTime() aby uzyskać numer seryjny, lub po prostu zmusić datę na numer: +new Date()

Aby zrobić to na użyciu timera setInterval(). Byłby to kompletny kod, który można po prostu spaść wewnątrz tagu skrypt na swojej stronie na <head>:

$(function() { 
    var intervalMS = 5000; // 5 seconds 
    setInterval(function() { 
     $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date()); 
    }, intervalMS); 
});

Źródło

2011-06-28 16:57:16 gilly3

Dodawanie przedział czasowy do końca obrazu URL pracował dla mnie.

var imagePath = "http://localhost/dynamicimage.ashx";

$ ("# imgImage").attr ("img", imagePath + & ts "+ (nowa data()), toString());

Źródło

2016-11-30 06:21:40

Aktualizowanie obrazu bez przeładowania strony

Odpowiedz

Powiązane problemy