Làm thế nào để tải lại img cứ 5 giây bằng javascript?

Question

Làm thế nào để tải lại img cứ 5 giây bằng javascript?

<img src="screen.jpg" alt="" /> 

Answer 1

Mỗi khi bạn muốn tải lại hình ảnh, bạn phải thay đổi url hình ảnh như vậy: "? Screen.jpg rand = 123456789" ở đâu "123456789" là một con số được tạo ngẫu nhiên, được tái tạo mỗi khi bạn muốn tải lại hình ảnh. Trình duyệt sẽ nghĩ rằng đó là một hình ảnh khác và thực sự tải xuống lại, thay vì truy xuất nó từ bộ nhớ cache. Các máy chủ web rất có thể sẽ bỏ qua và loại bỏ tất cả mọi thứ sau khi dấu chấm hỏi.

Để tải lại ngay từ đầu, bạn sẽ phải sử dụng Javascript để lấy yếu tố hình ảnh và thay đổi nguồn. Các tùy chọn đơn giản nhất tôi có thể thấy là để cung cấp cho các yếu tố hình ảnh một thuộc tính id, như vậy:

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

Sau đó, bạn có thể thay đổi mã nguồn của hình ảnh:

var myImageElement = document.getElementById('myImage'); 
myImageElement.src = 'screen.jpg?rand=' + Math.random(); 

Để thực hiện điều này trên một bộ đếm thời gian thiết lập , sau đó sử dụng hàm Javascript cấp cao nhất setInterval:

setInterval(function() { 
    var myImageElement = document.getElementById('myImage'); 
    myImageElement.src = 'screen.jpg?rand=' + Math.random(); 
}, 5000); 

Đối số thứ hai chỉ định 5000 mili giây, tương đương với 5 giây.