大尾巴狼

所谓大尾巴狼,就是装腔作势。

异步加载图片,提高HTML性能

忙了一上午,现在还没有吃饭。

在IE中通过ClientScript.GetCallbackEventReference(AspNet2.0)接口,实现no postback返回XML,解析后加载数据。
由于每个条目都要配一个小图片,如果条目很多时,比如1500条,加载时间会很长(本机30s),出现假死。

根据分析,是由于图片是同步显示的原因,如果不显示图片,只需要2s就加载完毕。
如何让图片显示不影响数据的加载成为问题的核心。

在img中没有找到标记异步的属性。突然想到iframe可以达到异步加载的效果,于是代码如下:
    imgElm=theDoc.createElement('iframe');
    imgElm.border
=0;
    imgElm.frameBorder
=0;
    imgElm.marginHeight
='0px';
    imgElm.marginWidth
='0px';
    imgElm.style.width
='20px';
    imgElm.style.height
='20px';
    imgElm.src
='images/obj_' + ObjType + '.gif';
    fieldHolder.insertBefore(imgElm);
让iframe作为图片显示的容器,现在1500条7s加载完毕,图片在后台一个个慢慢的加载,呵呵。

感觉还是不够快,不知道是否还有其他的方法。

posted on 2005-07-27 14:54 大尾巴狼 阅读(2371) 评论(9)  编辑 收藏 所属分类: dotNet技术和知识

评论

#1楼  2005-07-27 15:00 春鱼      

这里应该没有什么同步异步加载的问题。使用iframe都是一样的。同样需要向服务器请求所有图片的数据。

问题是,为什么需要一次性加载1500个图片?用户根本无法一次性浏览这么多图片,应该使用客户端脚本分批显示这些图片,例如一次显示几十个。   回复  引用  查看    

#2楼  2005-07-27 15:17 tinyfool [未注册用户]

最简单的一个思路就是,文字后面先不跟图片,然后用js定时更新的方法把1500张图片间隔的调出   回复  引用    

#3楼 [楼主] 2005-07-27 15:24 大尾巴狼      

图片只是作为标记用的20x20大小。
比如搜索就会返回很多内容,分页处理觉得更麻烦!
iframe可以达到后台异步显示的效果。
而且不用我再控制显示逻辑,由IE来负责加载。   回复  引用  查看    

#4楼  2005-07-27 15:50 Lion      

WebHtmlEditor在预览图片功能就可以等待图片加载完以后再显示出来

实现的语言是javascript,思想是先创建一个Img对象,src为你要载入的图片地址,如果图片已经complete就显示到指定的位置,否则在onload事件中设置在指定位置显示

不过要为1000多个图片这样操作就需要做个图片列表的Array,然后配合上面的方法自己调整一下
 
以下是代码片断:
/*
Create By lion
2005-06-20 16:18
Copyright (C) 1998-2005 www.lionsky.net All rights reserved.
WebSit: http://www.lionsky.net
Email: <A href="mailto:lion-a@sohu.com">lion-a@sohu.com</A>
*/
FileManager.prototype.LoadObjectFromPath
=function(path)

   
var area = document.getElementById("PreviewArea");
   
if (path)
    {
       
this.ImagePath    = path;
        area.innerHTML
="";
       
var img = document.createElement("IMG");
        img.src
= path;
       
if (img.complete)
        {
            area.innerHTML
="";
           
this.FitImage(img);
            area.appendChild(img);
        }
       
else
        {
           
if (document.all)
            {
                area.innerHTML
=this.getText("LoadingImagePrompt");
                area.style.font
="menu";
                img.onload
=function an()
                {
                    area.innerHTML
="";
                    File.FitImage(
this);
                    area.appendChild(
this);           
                }
            }
           
else
            {
                area.appendChild(img);
            }
        }
    }
   
else
    {
        area.innerHTML
="<div style='color:#aaaaaa;font-family:Tahoma;'>x</div>";
    }
};
  回复  引用  查看    

#5楼  2005-07-27 20:59 zitiger [未注册用户]

不知道同时开这么多个'iframe'对服务器有没有性能上的影响   回复  引用    

#6楼  2005-07-27 23:53 双鱼座      

强烈反对在一个页面中放置1500全iframe!
这样变态的处理一定来自变态的设计!   回复  引用  查看    

#7楼  2005-07-28 10:31 kevin.Geng [未注册用户]

1500.条,那没几个人会看完的, 所有的迹象表明,如果单行条目超过250就不会有人看,而且尽量控制在50以内。估计研究这个不如考虑分页。   回复  引用    

#8楼 [楼主] 2005-07-28 10:41 大尾巴狼      

就像资源管理器一样,每个文件夹下,每个文件都会有个图标。
而我这个也是类似的,文件夹里的文件再多,也是带图标显示的。
我也想把小图片去了,可以用文字。可不够直观。
而且返回大量数据的情况毕竟是少数!

不过具前线同志报告,显示性能得到了明显的提高,嘿嘿.....

to zitiger
很多iframe对服务器的影响,和很多img差不多。   回复  引用  查看    

#9楼  2008-04-30 15:49 MR LI [未注册用户]

这个老问题有没有新的解决办法?
在有些应用中加载这么500-1000条数据是有必要的,所以看官不要说这种应用的变态1
比如我在地图应用中要动态加载500-1000个点(符号),来表示不同的地物类别

宾馆。车站、建筑、等等等等,我们做了测试在屏幕上显示,保证能清楚的分辨不同的数据类别,可以加载到500个点以上

有没有谁能提高加载速度?   回复  引用    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      


相关链接:
 





<2005年7月>
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

公告

点击这里给我发消息
Locations of visitors to this page

与我联系

搜索

 

常用链接

留言簿(1)

我参与的团队

随笔分类(46)

随笔档案(37)

文章分类(9)

文章档案(9)

收藏夹(14)

coworker

开源项目

值得一看

最新随笔

积分与排名

最新评论

阅读排行榜