用的云服务器和宝塔面板,前端使用Ajax 部分的每天定时刷新加载服务器上的图片,服务器上的图片每天都不一样。
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
Ajax怎么定时加载服务器上的图片到前端页面上
收起
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
微信扫一扫
点击复制链接分享
- 邀请回答
- 编辑 收藏 删除
- 收藏 举报
当前问题酬金
¥ 50 (您已提供 ¥ 20, 还可追加 ¥ 450)
支付方式
扫码支付
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); };
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容
- 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
CSDN专家-sinJack 2022-08-19 05:40关注可以定义规则,如根据年月日对图片进行分组,ajax 根据当前时间年月日获取服务器对应目录图片资源。
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
快乐江小鱼 2022-08-19 07:05关注使用setInterval设定ajax调用的时间
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
有马大树 2022-08-19 07:13关注1.首先你需要做一个后端,功能是获取图片目录下的图片文件列表,返回给前端,前端展示出图片列表
2.再做一个后端,展示单个图片,参数是图片名称。后端拿到图片名称后,拼接出图片的文件路径,然后通过httpresponse将图片数据write到前端,前端展示图片。本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
EdsionWang 2022-08-19 07:28关注var url = "yourimagepath"; setInterval(function (){ $.ajax({ url:url, type:"post", success:function(result){ // 获取到图片后,执行你的程序 } }); }, 1000 * 60 * 60); //设定1小时执行一次
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
爱吃苦瓜的猿 2022-08-19 08:00关注这个需求场景应该是用于公共区域大屏展示之类的,用户打开页面后就不会再主动去点击与刷新页面。
实现这类功能最好前后端共同完成。前端定时请求服务端数据,获取图片地址成功就刷新页面,获取失败就不刷新(避免大屏展示图片出现异常,影响美观)。ajax的定时任务功能就可以实现。
后端每次再收到请求后,都去指定文件路径下获取当前最新的图片的路径返回给前端(也可以是其他的规则,譬如返回后缀与当前日期相等的文件)。
后端还需要增加报警功能,每次后端在获取图片路径给前端时需要判断一下,如果没有获取到想要的路径(譬如8月10日请求时,服务器上生成8月10日图片的任务还没完成,或者失败了,导致8月10日图片缺失了),就发送邮件报警,避免前端长时间展示的都是老旧图片。
如果只靠前端完成也可以,但是存在明显的缺陷就是,图片长时间不存在时系统与管理员感知不到。
只依靠前端定时任务实现的思路:后端图片在生成时,文件名按照时间规则来生成,ajax根据前端时间生成图片url地址,去服务器判断url路径是否存在,存在就刷新当前页面。本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 编辑记录微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
kakaccys 2022-08-19 08:05关注前端js部分通过setinterval每隔一段时间查询Date()获取到当前日期,如果日期比上次图片日期大一天,则ajax请求后端服务器接口获取图片,并更新对应dom元素
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
「已注销」 2022-08-19 09:13关注那你就是制定定时器任务吧
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
ZionHH 2022-08-19 09:19关注本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
caperxi 2022-08-19 09:24关注可以用轮询得方式获取, 如果有后台配合 ,也可以改成websocket 更方便 服务器有更新直接推送到前端
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
Beq 2022-08-19 09:37关注- server push, http2.0的功能,由后端主动推送内容给前端
- html 页面每次打开都会重新拉取服务器资源,我的理解是你不需要做操作,保证每次加载都是最新的
- 如果你的页面长期保持打开状态,那需要建立长链接,长链接都是基于websocket(http),比如 mqtt ,建链后保持心跳(链接的活跃),后端通过sendMessage 主动将消息内容推给前端,前端加载就行了
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
拖下去砍了 2022-08-19 10:54关注写个定时器,每隔一段时间执行一次
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
黎明不管黑夜的星空 2022-08-19 14:30关注前端部分可以用定时器解决
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容
报告相同问题?
- 2022-08-19 03:21回答 13 已采纳 window.onload=function(){ setTimeout(function(){ // XHR to request a JS and a CSS varxhr=newXMLH
- 2021-12-11 22:33回答 1 已采纳 你应该是用原生js吧用获取到的数据生成html片段,然后插入到页面中.例如: 获取到的数据是data=[ ] for(let i =0;i<data.length;i++){
- 2022-05-27 01:53回答 3 已采纳 拿到数据进行循环动态渲染到页面上去 ```typescript let dom=document.getElementById('table'); let data=[{
- 2023-02-24 14:54经海路大白狗的博客 定时任务,简单的理解就是多久后做什么,每隔多久做什么 。你是否感觉到了,其实定时任务是一个无处不在的东西,
- 2020-05-20 11:31回答 2 已采纳 ajax POST请求的数据格式为Json,View就应该返回Json代码,Ajax收到数据后Json数据后,然后判断通过Js进行页面跳转
- 2023-03-25 16:06回答 2 已采纳 请把文字代码贴出来,不要发图片的,不方便复制参考gpt,要渲染所有的数据,你需要使用循环来遍历每个数据并在循环内部进行渲染。例如,你可以使用 forEach() 方法来遍历歌曲列表并将每个歌曲的名字渲
- 2017-03-08 12:49回答 1 已采纳 try this, not sure it will work for regular javascript, $io('#load_order_preview').on('clic
- 2021-07-14 11:46葡萄城技术团队的博客 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决...对于服务商而言,前端优化能够减少页面请求数量,宽带所占带宽,有效的节省资源。 前端优化的内容很多,按照粒度等级划分可以大致分为两类:页.
- 2022-03-11 16:18回答 2 已采纳 代码没看出什么问题。自动刷新目测是提交表单了,有下面的可能1)jquery没有正确导入导致事件没绑定上,比如路径错误2)执行click事件绑定的代码放到dom前面了没绑定上事件,导致提交了表单。需要放
- 2016-12-29 10:56回答 2 已采纳 你是服务器端response.redirect跳转的话是设置301相应头做跳转,ajax是不会跳转的,只会继续请求301返回的页面地址,获取这个地址的内容。 你应该返回某个值,如false什么的
- 2021-02-17 21:03回答 4 已采纳
- 2022-08-07 15:39Meat_doll的博客 } }) }) app.listen(9090) 3、去窗口去输入指令npm run dev 4、然后去浏览器去输入网址 二、ajax 1、为什么会有ajax技术 前端刷新页面是有2种技术 一是,整个页面刷新 跳转到一个新的网页HTML 二是局部刷新(ajax...
- 2017-08-23 02:26回答 6 已采纳 ``` var html = ''; for (var i = 0; i ' + user.name + '' + user.phone + '' + user.email + '';
- 2022-11-13 17:06旺旺大力包的博客 前端面试八股文,知识点广而全,内容会及时更新
- 2021-06-13 06:23发对象的小仙女的博客 如何处理前端页面首次加载慢的问题这个ajax请求,几秒钟的延迟时间正常范围,它步运行的,对页面的不会造成直接影响。从图片中可看出,它的加载时间为138ms,不算长啊,后面的4.84s是它等待服务器返回数据的时间,在...
- 没有解决我的问题, 去提问
问题事件
悬赏问题
- ¥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 根据控制框图,传递函数求解