2011-06-28 17 views
9

Kullanıcıya yenileme düğmesine basmak zorunda kalmadan her iki saniyede bir sunucuda güncellenen bir resmi güncellemeye nasıl başlarım, ilk tahminim ajax'dı ama gerçekten işe yaramadım onunla daha önce. Birisi bana doğru yönde işaret edebilir mi?Sayfanın başına resim güncellemeden güncelleme

DÜZENLEME: -

+0

" Bir komut dosyası döndürerek URL'yi yakalamaya çalışıyorsunuz "diyorsunuz, ancak şu anda yeniden yükleyebileceğinizi ima ediyorsunuz. Görüntüyü tazeleyen bir resim var.Yani, kaynağı görüntülediğinizde bulduğunuz img etiketine html eklemek için lütfen sorunuzu düzenler misiniz? – gilly3

+0

@ gilly3 sayfa sayfa kaynağı yok tüm sayfa sadece bir perl betiği tarafından oluşturulan bir görüntüdür, bu nedenle img etiketi yoktur, html yoktur.Görüntüyü bir web sayfasının içine koyup onu oluşturan görüntüyü güncellemek için yenilemek istedim. Perl betiği – Mehran

cevap

3

Perl komut dosyanızda bir sorun var gibi görünüyor. Resme URL’ye erişmeye çalışmak, yine de bir görüntü döndürmelidir. İkili verileri döndürmeli ve bir betik değil. Yanıtın İçerik türü üstbilgisini de görüntü/gif olarak ayarlamanız gerekir. JavaScript kodunuzu düzeltmeye çalışmadan önce gerçekten ikili veriyi döndürüp döndürmediğini doğrulayın.

+0

Çok teşekkürler, senaryo buydu. – Mehran

3

sadece img src özelliği güncelleştirmek için javascript kullanmak bir komut dosyası dönmek url bunu kapmaya çalışıyor görüntü perl programı tarafından oluşturulan bir .gif olduğunu söylemeyi unutmuşum.

HTML:

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

JS: Bir zamanlayıcı üzerinde istiyorsanız

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

, böyle bir şey yapmak:

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

Eğer önbelleğe alma ile ilgili bir sorun varsa, url'nin sonuna rastgele bir sorgu dizesi ekleyin: "? rnd = randomNumberHere"

9

görüntüyü bunu değiştirmek her zaman yeniden tarayıcıyı zorlayarak,

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

Bu ("yourimage" kimliğine sahip) Resim etiketinin src özelliğini değiştirir ve buna rastgele sorgu dizesi ekler gibi bir şey yapın.

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

her X saniyede sunucuya Ajax gönderin:

imajını her 5 saniyede yeniden yüklemek için böyle bir şey yapmak. görüntünün bağlantısı yanıttan == önce, güncelleme yok, yeni bağlantı varsa: $('img.class').attr('src','link');

10

AJAX gerekli değil, yalnızca resmin src özelliğini güncelleyin. Ancak, aynı URL'ye sahip olduğundan, tarayıcıya yalnızca eski resmi tarayıcının önbelleğinden yüklemediğinizden emin olmak için tarayıcıya benzersiz bir adres vermeniz gerekir. Geçerli tarihin seri numarasını new Date().valueOf() üzerinden alarak ve bunu sorguya bir sorgulama olarak ekleyerek benzersiz bir görüntü garanti edebilirsiniz.

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

Ayrıca seri numarası almak, ya da sadece bir numaraya tarih zorlamak için new Date().getTime() kullanabilirsiniz: +new Date()

bir zamanlayıcı kullanımı setInterval() bunu yapmak için.

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

URL benim için çalıştı görüntünün sonuna bir zaman aralığı Ekleme: Böylelikle, yeni sayfa en <head> bir senaryo etiketinin içine düşebilir tam kod olacaktır.

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

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

İlgili konular