请转载的朋友带上出处，谢谢。

最近忙，而且上不了网，所以一直没更新博客，现在把最近工作上遇到的一些问题及解决方案写出来。希望大家遇到相同的问题不会走弯路。

先说一下修改之前是一个页面上显示一个图片，且图片是后台用流的方式刷出来的。也就是前一篇中的图风配图，一页以前显示一个，现在要显示20个。

用jstl生成了横4纵5的图显示列表。

<table> <c:forEach begin="1" end="4" step="1" varStatus="status1"> <tr> <c:forEach begin="1" end="5" step="1" varStatus="status2"> <td> <div id="imgBox${status1.index*10+status2.index }" style="width:250px; height:190px; background:#cccccc; overflow:hidden"> <img alt="windGraph" src="${path}/images/ajaxLoader.gif" width="100%" height="100%" id="show${status1.index*10+status2.index }"> </div> </td> </c:forEach> </tr> </c:forEach> </table>

 在页面加载函数里将每个图的src进行替换

var trow=1; var tcol=1; for(var i=0;i<selectTermArray.length;i++){ var tmpterm=selectTermArray[i]; tmpterm=tmpterm.trim(); var info="termSelect="+tmpterm+"&itemSelect=${itemSelect}&jj=${jj}&startNd=${startNd}&endNd=${endNd}&startHour=${startHour}&endHour=${endHour}"; dateStr="&year="+year+"&month="+month+"&day="+day+"&endYear="+endYear+"&endMonth="+endMonth+"&endDay="+endDay; windStr="&minWindSpeed="+0+"&maxWindSpeed="+0+"&initWindSpeed="+dataArray[0]; srcStr=info+windStr+dateStr; //$("#show").attr("src","windGraph.action?"+srcStr+"&windArcOnly=${windArcOnly}"); $("#show"+trow+""+tcol).attr("src","windGraph.action?"+srcStr+"&windArcOnly=${windArcOnly}"); if(tcol%5==0){ tcol=0; trow++; } tcol++; } for(var i=trow;i<5;i++){ for(var j=tcol;j<6;j++){ //$("#show"+i+""+j).attr("src",""); $("#show"+i+""+j).hide(); } tcol=1; }

 其间在解决这问题时遇到了以下问题，20个图只出来一张图，以为是流的原因，本来在想难道同时输出20个不行， 用流的方式刷出来。找了一下用AJAX来进行异步操作，结果才发现是因为除了第一个以外的其它所有的SRC的地址有一个地方都换行了。然后把SRC的一个参数去了空，所有图都出来了。

String.prototype.trim = function(s) { s = (s ? s : "\\s"); s = ("(" + s + ")"); var reg_trim = new RegExp("(^" + s + "*)|(" + s + "*$)", "g"); return this.replace(reg_trim, ""); };

 显示速度还可以，一页显示20个每个的尺寸是190*250，不用AJAX异步加载也没问题。这个问题就算搞定了。

以下是效果图，截图是在1680*1050上看的。

追加，上面描述的有点问题，其实上面的图显示的不完全正确，原因是因为有些本应该显示出来的却没有显示了出来，我是说怎么只选一个时候有数据，局选多了就变样了，本应该有的却没有显示。这个问题已解决了，看来多个图片同时请求一个地址参数不同，而且后台以流的方式返回数据，这样是不行的。下面我用的间隔0.5秒去请求下一个，直到请求完。

引入<script src="${path}/js/jqGrid/jquery.timers-1.2.js" type="text/javascript"></script>

将上面的代码稍做修改，如下

var trow=1; var tcol=1; var rowcolArray=new Array(); var rowcolUrlArray=new Array(); for(var i=0;i<selectTermArray.length;i++){ var tmpterm=selectTermArray[i]; tmpterm=tmpterm.trim(); var info="termSelect="+tmpterm+"&itemSelect=${itemSelect}&jj=${jj}&startNd=${startNd}&endNd=${endNd}&startHour=${startHour}&endHour=${endHour}"; dateStr="&year="+year+"&month="+month+"&day="+day+"&endYear="+endYear+"&endMonth="+endMonth+"&endDay="+endDay; windStr="&minWindSpeed="+0+"&maxWindSpeed="+0+"&initWindSpeed="+dataArray[0]; srcStr=info+windStr+dateStr; //$("#show"+trow+""+tcol).attr("src","windGraph.action?"+srcStr+"&windArcOnly=${windArcOnly}"); rowcolArray[i]=trow+""+tcol; rowcolUrlArray[i]="windGraph.action?"+srcStr+"&windArcOnly=${windArcOnly}"; if(tcol%5==0){ tcol=0; trow++; } tcol++; } for(var i=trow;i<5;i++){ for(var j=tcol;j<6;j++){ //$("#show"+i+""+j).attr("src",""); $("#show"+i+""+j).hide(); } tcol=1; } var tmpix=0; show20Graph(); $('body').everyTime(0.5*1000, 'b', function() {//2秒后重新调用 show20Graph(); });

问题解决，以上是间隔0.5秒显示效果如下图，与上图的参数是一模一样的。

再追加，实在不好意思，改正一些东西，免得误导大家，今天给客户确认，结果又是一大堆修改，有一点我估计要重新写，也就是为什么二十个页面同时请求有些出数据有些不出的原因(可能)，因为没有试同时输出20个，没这个时间去写测试代码，所以上面说的20个请求同一个地址参数不一样不能出可能是不对的。这里指正。说一下我的用的框架struts2+spring2.5+spring jcbc ，每一个图片请求的是一同一个Action的同一个方法，只是参数不一样而已，返回结果还是以图片流的形式返回。

原因找到是因为。生成这个图片的后台的数据是调的一个数据库的function,这个function将结果存在一个表中，且每次存之前清除，也就是表里最多16条数据，16个方向的数据。这样的话以前只有一个图时也存在这样的问题，多个用户同时访问这个图，参数不一样时，出来的图可能就不正确。现在一个画面是最大20个图，访问同一个ACTION，间隔一定时间。如果多个用户同时访问同样的功能，还是会存在问题，所以有可能需要大改，后台取数据处理数据的地方全要改。麻烦的事呀，真是个日本人，几句话搞的程序员要做很多工作。疯了，

下面是修改后的图，还有很多要修改。一个图最边界一个值，另一个值就是实线圆圈显示的位置，显示到这个值后外边的圆圈的线就不画了，但数据照样画，填充依旧。这个继续研究。