u011459362 2022-08-19 03:21 采纳率: 100%
浏览 109
已结题

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

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

  • 写回答

13条回答 默认 最新

  • 起个昵称难得很 2022-08-19 14:40
    关注
    
    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);
    
    };
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • CSDN专家-sinJack 2022-08-19 05:40
    关注

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

    评论
  • 快乐江小鱼 2022-08-19 07:05
    关注

    使用setInterval设定ajax调用的时间

    评论
  • 有马大树 2022-08-19 07:13
    关注

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

    评论
  • EdsionWang 2022-08-19 07:28
    关注
    
                var url = "yourimagepath";
                setInterval(function (){
                $.ajax({
                    url:url,
                    type:"post",
                    success:function(result){
                    // 获取到图片后,执行你的程序
                    }
                });
                }, 1000 * 60 * 60); //设定1小时执行一次
    
    评论
    1人已打赏
  • 爱吃苦瓜的猿 2022-08-19 08:00
    关注

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

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

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

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

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

    评论 编辑记录
  • kakaccys 2022-08-19 08:05
    关注

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

    评论
  • 「已注销」 2022-08-19 09:13
    关注

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

    评论
  • ZionHH 2022-08-19 09:19
    关注
    评论
  • caperxi 2022-08-19 09:24
    关注

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

    评论
  • Beq 2022-08-19 09:37
    关注
    1. server push, http2.0的功能,由后端主动推送内容给前端
    2. html 页面每次打开都会重新拉取服务器资源,我的理解是你不需要做操作,保证每次加载都是最新的
    3. 如果你的页面长期保持打开状态,那需要建立长链接,长链接都是基于websocket(http),比如 mqtt ,建链后保持心跳(链接的活跃),后端通过sendMessage 主动将消息内容推给前端,前端加载就行了
    评论
  • 拖下去砍了 2022-08-19 10:54
    关注

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

    评论
  • 关注

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

    评论
查看更多回答(12条)

报告相同问题?

问题事件

  • 系统已结题 8月27日
  • 已采纳回答 8月19日
  • 创建了问题 8月19日

悬赏问题

  • ¥15 docker无法进入容器内部
  • ¥15 qt https 依赖openssl 静态库
  • ¥15 python flask 报错
  • ¥15 改个密码引发的项目启动问题
  • ¥100 CentOS7单线多拨
  • ¥15 debian安装过程中老是出现无法将g21dr复制到g21dr怎么解决呀?
  • ¥15 如何用python实现跨工作簿的指定区域批量复制粘贴
  • ¥15 基于CH573f的雷迪安CR1400m通讯代码
  • ¥15 matlab m文件如何与matla app designer 数据交互?
  • ¥15 根据控制框图,传递函数求解