Làm mới nguồn cấp dữ liệu hình ảnh với jQuery/ajax

Question

Tôi có một camera Axis có nhiều đầu ra, một trong số đó là hình ảnh jpg. Hình ảnh này vẫn được chụp từ máy ảnh tại thời điểm bạn tải nó lên. Tôi muốn thực hiện một cách cho hình ảnh để tải lại (mỗi 30 giây) mà không cần phải tải lại toàn bộ trang, tuy nhiên, tôi muốn cho mã để tải xuống đầy đủ hình ảnh trước khi cập nhật nó để tránh có một màn hình trống.

Tôi đã đọc xung quanh và điều gần nhất tôi thấy là bài đăng này Using AJAX/jQuery to refresh an image nhưng sự khác biệt là nguồn cấp dữ liệu hình ảnh tôi có đến từ chính máy ảnh thực không phải là tệp php. Tôi đã thử một vài cách để làm việc này với url của tôi nhưng tôi đã thất bại do thiếu kiến ​​thức về javascript.

Mã Tôi đang sử dụng ngay bây giờ để kéo lên hình ảnh chỉ là một thẻ hình ảnh đơn giản ...

<img src="[camera ip]/jpg/1/image.jpg">

và bất cứ lúc nào bạn làm mới cửa sổ trình duyệt nó mang lại cho bạn một bản chụp của luồng video hiện tại.

Bất kỳ trợ giúp nào sẽ được đánh giá rất nhiều!

Kính trọng,
Javier

Answer 1

tôi không thể tìm thấy một webcam trực tuyến với một hình ảnh mới mẻ để thử nghiệm chống lại điều này, nhưng tôi nghĩ rằng đây nên để các trick cho bạn ... hoặc ít nhất giúp bạn có thực sự gần gũi ...

<script> 
// URL to your cam image 
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg'; 

var buffer = {}; 
function preload() { 
    buffer = new Image(); 
    // attaching the seconds breaks cache 
    buffer.src = cam_image + '?' + (new Date()).getTime(); 
    buffer.onload = function() { 
     setTimeout(preload, 30000); // 30 seconds refresh 
     document.getElementById('myimg').src = buffer.src; 
    } 
} 
preload(); 
</script> 

Answer 2

Nếu bạn đang làm việc với một nhóm tĩnh của hình ảnh - bạn đã biết tên tập tin và nó sẽ không thay đổi - bạn sẽ nạp tất cả mọi thứ vào html của bạn ban đầu (mà giải quyết được màn hình trống mối quan tâm), sau đó sử dụng một plugin jquery để xoay/làm mới các hình ảnh ở khoảng thời gian bạn chỉ định, có thể là 30 giây hoặc bất cứ điều gì.

Vì vậy, html của bạn sẽ trông như thế này:

<ul> 
    <li><img src="[camera ip]/jpg/1/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/2/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/3/image.jpg"></li> 
    ... 
</ul> 

Và sau đó các plugin sẽ lướt qua chúng.

Đối với plugins, sử dụng một trong hai:

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

Chúc may mắn!