当前位置：首页 → 问答吧 → 网页上超大图强制缩小宽高所引起的内存飙升的问题

网页上超大图强制缩小宽高所引起的内存飙升的问题

时间：2010-05-21

来源：互联网

实际项目比我所举得例子复杂的多，经过各种测试然后简化到这个最简答的例子发现了这个问题。

最简单的功能：点击小图，显示大图。如果在显示大图时不限制大图的宽高，那么内存占用不会有很大的变化。如果限制了大图的宽高（比如原先1680*1050的图片强制限制到800*480），那么内存会升高，如果不断的点击不同的小图，那么内存占用会持续上扬，最终会达到很恐怖的地步，而且关闭网页刷新均不会释放内存。

大家可以看下面两种例子，可调出任务管理查看浏览占用内存。浏览过一次后因为有缓存，所以查看第二个例子最好能清空一下缓存。

大图版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>大图版</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> body,ul,form,li {margin:0;padding:0;} li {list-style-type:none;} #thumbs {width:100%;clear:both;height:60px;padding:3px;} #thumbs li {float:left;padding:3px;} #big {padding:0 6px;} </style> <script type="text/javascript"> $(function(){ var HtmlList=""; var ii=im=0; var ThumbList="thumbnails/01.jpg||thumbnails/02.jpg||thumbnails/03.jpg||thumbnails/04.jpg||thumbnails/05.jpg||thumbnails/06.jpg||thumbnails/07.jpg||thumbnails/08.jpg"; var LargeList="fullscreen/01.jpg||fullscreen/02.jpg||fullscreen/03.jpg||fullscreen/04.jpg||fullscreen/05.jpg||fullscreen/06.jpg||fullscreen/07.jpg||fullscreen/08.jpg"; var ImagePath="http://files.jumpeyecomponents.net.s3.amazonaws.com/slideshowbox/swf/examples/"; ThumbArray=ThumbList.split("||"); LargeArray=LargeList.split("||"); for(ii=0;ii<ThumbArray.length;ii++){ HtmlList+='<li><img src="'+ImagePath+ThumbArray[ii]+'" width="80" rel="'+ii+'" alt="" /></li>'; } $('#thumbs ul').html(HtmlList); showLargePic(ImagePath+LargeArray[0]); $('#thumbs li img').live('click',function(){ var i=$(this).attr('rel'); var path=ImagePath+LargeArray[i]; showLargePic(path); }); }); function showLargePic(path){ $('#big').html('<img src="'+path+'" alt="" />'); } </script> </head> <body>第一次运行可能会出现错误提示，请刷新一次即可正常。因为浏览过一次后，浏览器会有缓存， <div id="thumbs"><ul></ul></div> <div id="big"></div> </body> </html>
提示：您可以先修改部分代码再运行

缩小图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>强制缩小图版</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> body,ul,form,li {margin:0;padding:0;} li {list-style-type:none;} #thumbs {width:100%;clear:both;height:60px;padding:3px;} #thumbs li {float:left;padding:3px;} #big {padding:0 6px;} </style> <script type="text/javascript"> $(function(){ var HtmlList=""; var ii=im=0; var ThumbList="thumbnails/01.jpg||thumbnails/02.jpg||thumbnails/03.jpg||thumbnails/04.jpg||thumbnails/05.jpg||thumbnails/06.jpg||thumbnails/07.jpg||thumbnails/08.jpg"; var LargeList="fullscreen/01.jpg||fullscreen/02.jpg||fullscreen/03.jpg||fullscreen/04.jpg||fullscreen/05.jpg||fullscreen/06.jpg||fullscreen/07.jpg||fullscreen/08.jpg"; var ImagePath="http://files.jumpeyecomponents.net.s3.amazonaws.com/slideshowbox/swf/examples/"; ThumbArray=ThumbList.split("||"); LargeArray=LargeList.split("||"); for(ii=0;ii<ThumbArray.length;ii++){ HtmlList+='<li><img src="'+ImagePath+ThumbArray[ii]+'" width="80" rel="'+ii+'" alt="" /></li>'; } $('#thumbs ul').html(HtmlList); showLargePic(ImagePath+LargeArray[0]); $('#thumbs li img').live('click',function(){ var i=$(this).attr('rel'); var path=ImagePath+LargeArray[i]; showLargePic(path); }); }); function showLargePic(path){ $('#big').html('<img src="'+path+'" width="800" alt="" />'); } </script> </head> <body>第一次运行可能会出现错误提示，请刷新一次即可正常 <div id="thumbs"><ul></ul></div> <div id="big"></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 wxyhhy911 于 2010-5-21 11:48 编辑 ]

作者: wxyhhy911 发布时间: 2010-05-21

我和老外的中式婚礼，大家提提意见！

http://www.51hongzhuang.com
http://www.dhunyan.com
中式婚礼
中式礼服婚宴酒店婚礼跟拍

作者: hongzhuang 发布时间: 2010-05-21

学些一下。。

作者: shbijiben 发布时间: 2010-05-21