广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

通过 AJAX 调用接收到图像后立即显示动态生成的图像

发布于2022-06-22 22:00     阅读(1022)     评论(0)     点赞(7)     收藏(5)




我想要做的是在页面完全加载之前加载我动态生成的图像。这就是我正在做的事情。我正在通过 向服务器发出 ASYNC 请求createXMLHttpRequest在服务器端,我正在创建新图像(图表图像)并以 JSON 格式返回图像属性。

这是html代码片段:

<!-- first image -->  
<div id="image3Obj">
     <div id="image3"><img src="img/loader32.gif"></div>
</div>

<!--second image -->
<div id="image2Obj">
     <div id="image2"><img src="img/loader32.gif"></div>
</div>

<!-- third image-->
<div id="image1Obj">
    <div id="image1"><img src="img/loader32.gif"></div>
</div>

<script type="text/javascript" defer>load_components();</script>

Javascript代码片段:

<SCRIPT LANGUAGE="Javascript" src="js_lib/ajaxCaller.js"></SCRIPT>

<script type="text/javascript">

function load_components() {
     createUrlStr('url1');
     createUrlStr('url2');
     createUrlStr('url3');
}


function createUrlStr(url)
     // make async request to server and generating brand new image, then returning   image div name, source, width and height back in json format
    ajaxCaller.getPlainText(url_str, loadImage);
}

function loadImage() {
    var jsonObj = eval('(' + xReq.responseText + ')');
    if (jsonObj.imgDiv != undefined && jsonObj.imgSrc != undefined) {
         var newImg = document.createElement("img");
         newImg.src = jsonObj.imgSrc;
         if (jsonObj.imgWidth != undefined && jsonObj.imgHeight != undefined) {
             newImg.width = jsonObj.imgWidth;
             newImg.height = jsonObj.imgHeight;
         }
         document.getElementById(jsonObj.imgDiv).appendChild(newImg);
    }
}

</script>

问题是图像在 html 上一个接一个地加载,但仅在加载最后一个图像时才显示。知道我在这里想念什么吗?


解决方案


在没有看到实际示例的情况下,我的猜测是,因为您同时运行所有 3 个异步请求,所以这一切都发生得如此之快,它们似乎同时发生,而实际上它们可能相隔几毫秒。如果您像下面的示例那样延迟您的请求,它是否会如您所愿?

function load_components() {
    var x,y,z;

    x = setTimeout(function(){ createUrlStr('url1'); }, 100);
    y = setTimeout(function(){ createUrlStr('url2'); }, 2000);
    z = setTimeout(function(){ createUrlStr('url3'); }, 5000);
}

还要记住,当您在服务器端生成图像并按顺序插入标签时,图像数据是在浏览器而不是您的 AJAX 请求之后下载的。要查看这种情况,请查看 Firebug 中的 NET 选项卡。


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/371174/a1a0ac3d35378e8e37bf/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

7 0
收藏该文
已收藏

评论内容:(最多支持255个字符)