Ajax怎么定时加载服务器上的图片到前端页面上

用的云服务器和宝塔面板，前端使用Ajax 部分的每天定时刷新加载服务器上的图片，服务器上的图片每天都不一样。


window.onload=function(){

setTimeout(function(){

// XHR to request a JS and a CSS

varxhr=newXMLHttpRequest();

xhr.open('GET','http://domain.tld/preload.js');

xhr.send('');

xhr=newXMLHttpRequest();

xhr.open('GET','http://domain.tld/preload.css');

xhr.send('');

// preload image

newImage().src="http://domain.tld/preload.png";

},1000);

};

可以定义规则，如根据年月日对图片进行分组，ajax 根据当前时间年月日获取服务器对应目录图片资源。

使用setInterval设定ajax调用的时间

1.首先你需要做一个后端，功能是获取图片目录下的图片文件列表，返回给前端，前端展示出图片列表
2.再做一个后端，展示单个图片，参数是图片名称。后端拿到图片名称后，拼接出图片的文件路径，然后通过httpresponse将图片数据write到前端，前端展示图片。


            var url = "yourimagepath";
            setInterval(function (){
            $.ajax({
                url:url,
                type:"post",
                success:function(result){
                // 获取到图片后，执行你的程序
                }
            });
            }, 1000 * 60 * 60); //设定1小时执行一次

这个需求场景应该是用于公共区域大屏展示之类的，用户打开页面后就不会再主动去点击与刷新页面。
实现这类功能最好前后端共同完成。

  1. 前端定时请求服务端数据,获取图片地址成功就刷新页面,获取失败就不刷新(避免大屏展示图片出现异常，影响美观)。ajax的定时任务功能就可以实现。

  2. 后端每次再收到请求后,都去指定文件路径下获取当前最新的图片的路径返回给前端(也可以是其他的规则,譬如返回后缀与当前日期相等的文件)。

  3. 后端还需要增加报警功能，每次后端在获取图片路径给前端时需要判断一下，如果没有获取到想要的路径(譬如8月10日请求时,服务器上生成8月10日图片的任务还没完成，或者失败了，导致8月10日图片缺失了)，就发送邮件报警，避免前端长时间展示的都是老旧图片。

如果只靠前端完成也可以，但是存在明显的缺陷就是,图片长时间不存在时系统与管理员感知不到。
只依靠前端定时任务实现的思路:后端图片在生成时,文件名按照时间规则来生成，ajax根据前端时间生成图片url地址，去服务器判断url路径是否存在，存在就刷新当前页面。

前端js部分通过setinterval每隔一段时间查询Date()获取到当前日期，如果日期比上次图片日期大一天，则ajax请求后端服务器接口获取图片，并更新对应dom元素

那你就是制定定时器任务吧

可以参考我这篇文章

可以用轮询得方式获取， 如果有后台配合 ，也可以改成websocket 更方便 服务器有更新直接推送到前端

  1. server push, http2.0的功能，由后端主动推送内容给前端
  2. html 页面每次打开都会重新拉取服务器资源，我的理解是你不需要做操作，保证每次加载都是最新的
  3. 如果你的页面长期保持打开状态，那需要建立长链接，长链接都是基于websocket（http），比如 mqtt ，建链后保持心跳（链接的活跃），后端通过sendMessage 主动将消息内容推给前端，前端加载就行了

写个定时器，每隔一段时间执行一次

前端部分可以用定时器解决