HTML编辑器中图片的处理

在使用UEditor等HTML编辑器时,若文章中图片大小超过元素给定的尺寸,则图片显示时会超出元素范围,使页面的排版出现混乱,这时可使用jQuery对文章中的图片和显示方式进行处理,以控制图片的显示大小和出现的方式。


以下为jQuery的JS文件和jQuery UI的引入文件。

<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css"/>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

以下为用于对文件中图片显示所使用的层
<div id="picDlg" title="图片查看" style="display:none;"></div>

以下为控制图片显示和运用效果的代码
		$(".bodyLeft img").load(function(){
			w=$(this).width();
			h=$(this).height();
			t=$(this).attr("title");
			src=$(this).attr("src");
			$(this).width(w>400?400:w);
			$(this).height(w>400?(400/w)*h:h);
			$(this).css("cursor","pointer");
			$(this).click(function(){
				$("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({
					width:"auto",
					height:"auto",
					title:t,
					modal:true,
					draggable:false,
					resizable:false
				})
			})
		})                                                                                                                                         


此处出现一种情况:若图片加载过一次,再访问时,会显示浏览器缓存的内容而不是重新加载图片,刚上述事件不会发生,图片依然以原尺寸显示。需要主动再加载一次,上述事件才能发生。另外在IE中上述事件也并不会发生。请教解决方案。

你可能感兴趣的:(html,jquery,function,div,border,stylesheet)