IE附图(Image对象)显示内存溢出解决方案

     近期用户在大批量自动电子扫描电子附件并频繁预览缩放图片后,会出现内存不释放并逐步上升,最终影响到用户对功能的正常使用,而此问题是IE浏览器才会有此问题。个人查询了大量资料,但也没找到彻底的解决办法,貌似是IE自身的debug,不过最终经过自己各种实践验证,最终问题得以解决,现稍微总结分享供其他人遇到同类问题时,能找到属于合适的解决方式。

问题现象:

    附图上传后,图片因要按等比例缩放显示,每进行行图片第一次展示或切换时,会根据图片长宽重新预加载资源生成缩放图,但一经过预加载生成缩放图后,发现内存会较之前会不断增加,此问题只有IE浏览器才会发生。

解决方案:

    目前重新加载生成缩放图后会直接导致内存增加,并且在很长时间段得不到释放,其产生的原因是因为生成缩放图前需要把图片缓存到Image对象,然后原图片调整完长宽后会重新从Image对象读取SRC生成对应缩放图,而目前在IE版本下,采用此更新原图片的src方式,会发现该资源信息一直得不到释放(不管置Image对象为null或显示调用垃圾回收CollectGarbage()),但经过各种尝试及测试验证,最终发现采用如下重新生成原图片的新Image元素方式,在行图片实时加载及重新生成缩略图情况下,反复切换图片,其内存不会像之前一直直线增加(如下图所示--某一测试场景)。


代码片段:

     lodaImage.js中方法LoadImage方法,其调整前和调整后片段如下,当然像旋转缩放方法同类似;
调整后:

jQuery.fn.LoadImage = function(scaling, width, height, loadpic) {
	if (loadpic == null) {
		loadpic = "/grm/electronicdoc/res/image/loading.gif";
	}
	return this.each(function() {
		var t = $(this);
		var src = $(this).attr("src")
		var img = new Image();
		// alert("Loading...")
			img.src = src;
			// 自动缩放图片
			var autoScaling = function() {
				if (scaling) {

					if (img.width > 0 && img.height > 0) {
						if (img.width / img.height >= width / height) {
							if (img.width > width) {
								if (width / img.width > 0.02) {
									t.width(width);
									t.height((img.height * width) / img.width);
								}
							} else {
								if (width / img.width <= 3) {
									t.width(width);
									t.height((img.height * width) / img.width);
								}
							}
						} else {
							if (img.height > height) {
								if (height / img.height > 0.02) {
									t.height(height);
									t.width((img.width * height) / img.height);
								}
							} else {
								if (height / img.height <= 3) {
									t.height(height);
									t.width((img.width * height) / img.height);
								}
							}
						}
					}
				}
			}
			// 处理ff下会自动读取缓存图片
			if (img.complete) {
				// alert("getToCache!");
				autoScaling();
				return;
			}
			//$(this).attr("src", null);
			var loading = $("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""
					+ loadpic + "\" />");

			t.hide();
			t.after(loading);
			$(img).load(function() {
				autoScaling();				
				
				loading.remove();
				<span style="background-color: rgb(255, 255, 102);">// 重新构造原IMG元素,当然要与js片段生成一致	
				var preViewImg ='<img id="image1' + '" height="'+ t.height() + '" width="' + t.width() 
				              + '" src="' + this.src + '" style="cursor:pointer;" alt="' + t.attr("alt")
				              + '" onclick="openWindowForPic(\'' + this.src + '\')" />';
				t.attr("src", null);
				t.remove();
				$("#td_img1").append(preViewImg);	
				// 释放资源引用并手工触发下垃圾回收,该垃圾回收只是催促下.		
				img.src = null;								
				$(img).remove();
				CollectGarbage();</span>
				// alert("finally!")
				});					          
		});
}

调整前频繁切换内存急速上升代码片段:
jQuery.fn.LoadImage = function(scaling, width, height, loadpic) {
	if (loadpic == null) {
		loadpic = "/grm/electronicdoc/res/image/loading.gif";
	}
	return this.each(function() {
		var t = $(this);
		var src = $(this).attr("src")
		var img = new Image();
		// alert("Loading...")
			img.src = src;
			// 自动缩放图片
			var autoScaling = function() {
				if (scaling) {

					if (img.width > 0 && img.height > 0) {
						if (img.width / img.height >= width / height) {
							if (img.width > width) {
								if (width / img.width > 0.02) {
									t.width(width);
									t.height((img.height * width) / img.width);
								}
							} else {
								if (width / img.width <= 3) {
									t.width(width);
									t.height((img.height * width) / img.width);
								}
							}
						} else {
							if (img.height > height) {
								if (height / img.height > 0.02) {
									t.height(height);
									t.width((img.width * height) / img.height);
								}
							} else {
								if (height / img.height <= 3) {
									t.height(height);
									t.width((img.width * height) / img.height);
								}
							}
						}
					}
				}
			}
			// 处理ff下会自动读取缓存图片
			if (img.complete) {
				// alert("getToCache!");
				autoScaling();
				return;
			}
			$(this).attr("src", "");
			var loading = $("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""
					+ loadpic + "\" />");

			t.hide();
			t.after(loading);
			$(img).load(function() {
				autoScaling();
				loading.remove();
				t.attr("src", this.src);
				t.show();
				// alert("finally!")
				});

		});
}

电子化扫描功能截图:



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭