Làm cách nào để cập nhật hình ảnh được cập nhật trên máy chủ sau mỗi vài giây với người dùng phải nhấn nút làm mới, lần đầu tiên tôi đoán là ajax nhưng tôi chưa thực sự làm việc với nó trước đây. ai đó có thể chỉ cho tôi đi đúng hướng?Cập nhật hình ảnh mà không cần tải lại trang
EDIT: Quên đề cập rằng hình ảnh là một .gif được tạo ra bởi một kịch bản perl - cố gắng lấy nó bằng url trả về một kịch bản
Có vẻ như có sự cố với tập lệnh Perl của bạn. Tuy nhiên, cố gắng truy cập hình ảnh bằng URL cũng phải trả lại hình ảnh. Nó sẽ trả về dữ liệu nhị phân và không phải là một tập lệnh. Bạn cũng nên đặt tiêu đề Kiểu nội dung của phản hồi thành hình ảnh/gif. Xác minh nếu nó thực sự trả về dữ liệu nhị phân trước khi cố sửa mã JavaScript của bạn.
Cảm ơn bạn rất nhiều đó là kịch bản. – Mehran
chỉ cần sử dụng javascript để cập nhật thuộc tính src của img.
HTML:
<img src="..." id="myImage" />
JS:
document.getElementById("myImage").src = "http://....";
Nếu bạn muốn nó trên một bộ đếm thời gian, làm một cái gì đó như thế này:
setInterval(function() { ... }, 4000);
Nếu bạn có một vấn đề với bộ nhớ đệm, thêm chuỗi truy vấn ngẫu nhiên vào cuối url: "? rnd = randomNumberHere"
làm cái gì đó như
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
này thay đổi thuộc tính src của thẻ hình ảnh của bạn (với id "yourimage") và thêm một chuỗi truy vấn ngẫu nhiên vào nó, buộc các trình duyệt để tải lại hình ảnh mỗi khi bạn thay đổi nó.
Để tải lại hình ảnh mỗi 5 giây, làm như sau:
window.setInterval(function()
{
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
mỗi X giây gửi Ajax đến máy chủ. nếu liên kết của hình ảnh từ phản hồi == trước đó, không có cập nhật, nếu liên kết mới: $('img.class').attr('src','link');
Không cần AJAX, chỉ cần cập nhật thuộc tính src của hình ảnh. Tuy nhiên, vì nó có cùng url, bạn phải cung cấp cho trình duyệt một địa chỉ duy nhất để đảm bảo bạn không chỉ tải hình ảnh cũ từ bộ nhớ cache của trình duyệt. Bạn có thể đảm bảo một hình ảnh độc đáo bằng cách lấy số sê-ri của ngày hiện tại qua new Date().valueOf() và thêm nó vào url dưới dạng chuỗi truy vấn.
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());
Bạn cũng có thể sử dụng new Date().getTime() để có được số serial, hoặc chỉ ép buộc ngày đối với một số: +new Date()
Để làm điều đó trên một bộ đếm thời gian sử dụng setInterval(). Đây sẽ là mã hoàn chỉnh mà bạn chỉ có thể thả bên trong một thẻ script trong của <head> trang của bạn:
$(function() {
var intervalMS = 5000; // 5 seconds
setInterval(function() {
$("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
}, intervalMS);
});
Thêm một khoảng thời gian đến cuối của hình ảnh URL làm việc cho tôi.
var imagePath = "http://localhost/dynamicimage.ashx";
$ ("# imgImage").attr ("img", imagePath + & ts "+ (ngày mới()), toString());
Bạn nói" cố gắng lấy nó bằng url trả lại tập lệnh ", nhưng bạn ngụ ý rằng bạn hiện có thể tải lại hình ảnh bằng cách làm mới trang Vì vậy, bạn phải chỉnh sửa câu hỏi của mình để bao gồm html cho thẻ img mà bạn tìm thấy khi bạn xem nguồn? – gilly3
@ gilly3 không có nguồn trang nào toàn bộ trang chỉ đơn giản là một hình ảnh được tạo bởi tập lệnh perl, do đó không có thẻ img, không có html. Tôi muốn lấy hình ảnh đó để đặt nó vào một trang web và làm mới nó để cập nhật hình ảnh được tạo từ perl script – Mehran